/*
 ** TailwindCSS Configuration File
 **
 ** Docs: https://tailwindcss.com/docs/configuration
 ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
 */
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    customForms: (theme) => ({
      default: {
        checkbox: {
          'width': theme('spacing.6'),
          'height': theme('spacing.6'),
          'backgroundColor': 'rgba(23, 49, 79, 0.6)',
          'borderColor': theme('colors.blue.800'),
          'textColor': theme('colors.blue.1000'),
          '&:focus': {
            backgroundColor: theme('colors.blue.1000'),
            borderColor: theme('colors.blue.700'),
            boxShadow: undefined,
          },
          '&:checked': {
            backgroundColor: theme('colors.blue.1000'),
            borderColor: 'transparent',
          },
        },
      },
    }),
    extend: {
      colors: {
        teal: {
          ...defaultTheme.colors.teal,
          flashy: '#24e8cc',
        },
        blue: {
          ...defaultTheme.colors.blue,
          760: '#2C5C94',
          850: '#2B4B74',
          1000: '#17314f',
        },
      },
      spacing: {
        '2px': '2px',
        '3p5': '0.875rem',
        '4b': '1.15rem',
        '11': '2.75rem',
      },
      borderWidth: {
        3: '3px',
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
      fontSize: {
        xxs: '0.625rem',
      },
      height: {
        '200': '50rem',
        '1/2': '50%',
      },
      maxWidth: {
        12: '3rem',
      },
      width: {
        22: '5.5rem',
      },
    },
  },
  variants: {
    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
  },
  plugins: [require('@tailwindcss/custom-forms')],
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  },
  future: {
    removeDeprecatedGapUtilities: true,
  },
}