import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';
import { css } from 'glamor';


const styles = {
  red: css({
    backgroundColor: 'red'
  }),
  blueGreen: css({
    backgroundColor: 'blue',
    ':hover': {
      backgroundColor: 'green'
    }
  })
};


export default Ember.Component.extend({

  styles,

  layout: hbs`

    <div class={{styles.red}}>
      This is red.
    </div>

    <div class={{styles.blueGreen}}>
      This is blue, and green on hover.
    </div>

  `
});