import Component from '@ember/component';
import { Styled, group } from 'ember-cli-ui-components';

export default Component.extend(Styled, {

  tagName: 'button',

  styles: {
    base: 'leading-tight pointer relative transition',

    defaultStyle: 'inline-block medium gray dim margins round',

    colors: group({
      gray: 'bg-black-10 text-black-80 font-medium',
      subtle: 'bg-black-10 text-black-40 font-medium',
      brand: 'border-none bg-brand-gradient text-white font-medium',
      warn: 'border-none bg-dark-red text-white font-semibold',
      white: 'font-normal bg-transparent border-solid border-2 border-white text-white',
      blue: 'border-none bg-blue text-white',
      'white-bg': 'font-normal bg-white text-near-black',
    }),

    active: 'bg-light-red text-white',

    sizes: group({
      small: 'text-7 xs:text-6 py-1 xs:py-2 px-2 xs:px-3',
      medium: 'text-6 xs:text-4 py-2 xs:py-3 px-3 xs:px-4',
      large: 'text-5 xs:text-4 py-3 px-3 xs:px-4'
    }),

    'nowrap': 'whitespace-no-wrap',

    floating: 'shadow-l',

    behavior: group({
      dim: 'dim',
      disabled: 'opacity-50 no-events'
    }),

    margins: group({
      margins: 'mt-2 mb-3',
      marginless: ''
    }),

    uppercase: 'uppercase',

    radii: group({
      round: 'rounded-2',
      pill: 'rounded-pill',
      append: 'rounded-r'
    }),

    bold: 'font-bold',

    full: 'w-full',

    displays: group({
      block: 'block',
      'inline-block': 'inline-block',
      flex: 'flex'
    }),

    input: {
      tagName: 'input'
    },

    link: {
      style: 'no-underline',
      tagName: 'a'
    }
  }
  
});