const { colors } = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          lighter: '#bfe9ff',
          default: '#56b4fc',
          dark: '#1552f0',
          darker: '#194bcc',
        },
        info: colors.blue,
        danger: colors.red,
        warning: colors.yellow,
        success: colors.green,
        facebook: '#3b5998',
      },
      spacing: {
        '72': '18rem',
        '80': '20rem',
        '88': '22rem',
        '96': '24rem',
        '104': '26rem',
        '112': '28rem',
        '120': '30rem',
      },
      boxShadow: {
        focus: '0 0 0 1px rgba(86, 180, 252, 1)',
        light: '0 8px 16px rgba(0, 0, 0, 0.03)',
        lighter: '0 4px 8px 0 rgba(0, 0, 0, 0.03)',
      },
      fontFamily: {
        sans: [
          'Inter',
        ],
      },
      maxHeight: {
        '0': '0',
      },
      pseudo: {
        'before': 'before',
        'after': 'after',
        'not-first': 'not(:first-child)',
      },
      transitionProperty: {
        'none': 'none',
        'all': 'all',
        'color': 'color',
        'bg': 'background-color',
        'border': 'border-color',
        'colors': ['color', 'background-color', 'border-color'],
        'opacity': 'opacity',
        'transform': 'transform',
        'height': 'height',
      },
      linearGradients: theme => ({
        colors: {
          'semi-transparent-white': ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0.4) 70%', 'rgba(255, 255, 255, 1)'],
        }
      }),
    }
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'group-hover'],
    height: ['responsive', 'after'],
    objectPosition: ['responsive', 'after'],
    position: ['responsive', 'after'],
    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
    width: ['responsive', 'after'],
    empty: ['before', 'after'],
    linearGradients: ['responsive', 'after'],
  },
  plugins: [
    require('tailwindcss-transitions')(),
    require('tailwindcss-gradients')(),
    require('tailwindcss-pseudo')({
      empty: true,
    }),
  ],
}