const plugin = require('tailwindcss/plugin')
const tinycolor = require('tinycolor2')

module.exports = {
    purge: {
        mode: 'layers',
        layers: ['components', 'utilities'],
        content: [
            './public/typo3conf/ext/ep_theme/Configuration/TypoScript/**/*.typoscript',
            './public/typo3conf/ext/ep_theme/Resources/Private/Layouts/**/*.html',
            './public/typo3conf/ext/ep_theme/Resources/Private/Partials/**/*.html',
            './public/typo3conf/ext/ep_theme/Resources/Private/Templates/**/*.html',
            './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/**/*.{js,vue}',
            './public/typo3conf/ext/ep_theme/Classes/ViewHelpers/**/*.php',
        ],
    },
    theme: {
        container: {
            center: true,
            padding: '1rem',
        },
        fontFamily: {
            'sans': [ 'Lato', 'sans-serif' ],
        },
        screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px',
        },
        extend: {
            colors: {
                'overlay': {
                    'black': tinycolor('#000000').setAlpha(0.85).toRgbString(),
                    'white': tinycolor('#ffffff').setAlpha(0.85).toRgbString(),
                },
                'concept': {
                    'default': '#005ca9',
                    'bdg': '#005ca9',
                    'skr': '#005ca9',
                    'evt': '#ed5454',
                    'fam': '#7ca7d5',
                    'grp': '#ffa300',
                    'prg': '#005ca9',
                    'ind': '#009fe3',
                    'wkd': '#44d04e',
                    'spz': '#436a8a',
                    'epe': '#436a8a',
                    'sfl': '#999',
                },
                'ep': {
                    'primary': '#3d8ccb',
                    'secondary': '#f0bc44',
                    'primary-light': '#009fff',
                    'primary-medium': '#165883',
                    'primary-dark': '#18527B',
                    'primary-10': tinycolor('#009fe3').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#009fe3').setAlpha(0.8).toRgbString(),
                    'secondary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
                    'secondary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
                },
                'sbw': {
                    'primary': '#f0bc44',
                    'secondary': '#ee525a',
                    'primary-dark': '#f0bc44',
                    'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
                },
                'snz': {
                    'primary': '#82C3C6',
                    'secondary': '#f9c33d',
                    'primary-10': tinycolor('#82C3C6').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#82C3C6').setAlpha(0.8).toRgbString(),
                },
                'uch': {
                    'primary': '#b5e400',
                    'secondary': '#19a3dc',
                    'primary-10': tinycolor('#b5e400').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#b5e400').setAlpha(0.8).toRgbString(),
                },
            },
            height: {
                '96': '20rem',
                '128': '32rem',
            },
            inset: {
                '100': '100%',
                '1/2': '50%',
            },
            zIndex: {
                '100': 100,
            },
        },
    },
    variants: {
        backgroundColor: ({ after }) => after([ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'even', 'odd' ]),
        textColor: ({ after }) => after([ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ]),
        borderColor: ({ after }) => after([ 'sbw','snz', 'uch' ]),
        display: ({ after }) => after(['group-hover']),
        visibility: ({ after }) => after(['group-hover']),
        opacity: ({ after }) => after(['group-hover']),
        rotate: ({ after }) => after(['group-hover']),
        flexDirection: ({ after }) => after(['even', 'odd']),
        padding: ({ after }) => after(['even', 'odd']),
    },
    plugins: [
        require('tailwindcss-alt')({
            variants: ['sbw', 'snz', 'uch'],
        }),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        plugin(function ({addVariant, e}) {
            addVariant('first-type', ({modifySelectors, separator}) => {
                modifySelectors(({className}) => {
                    return `.${e(`first-type${separator}${className}`)}:first-of-type`
                })
            })
        }),
        plugin(function ({addVariant, e}) {
            addVariant('last-type', ({modifySelectors, separator}) => {
                modifySelectors(({className}) => {
                    return `.${e(`last-type${separator}${className}`)}:last-of-type`
                })
            })
        }),
    ],
}