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

module.exports = {
    purge: {
        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',
        ],
        safelist: [
            'pt-8', 'pt-16', 'pb-8', 'pb-16',
            'bg-red-600',
            'bg-header-season-w',
            'bg-header-season-s',
            'bg-concept-bdg', 'bg-concept-bdg-overlay',
            'bg-concept-skr', 'bg-concept-skr-overlay',
            'bg-concept-evt', 'bg-concept-evt-overlay',
            'bg-concept-fam', 'bg-concept-fam-overlay',
            'bg-concept-grp', 'bg-concept-grp-overlay',
            'bg-concept-prg', 'bg-concept-prg-overlay',
            'bg-concept-ind', 'bg-concept-ind-overlay',
            'bg-concept-wkd', 'bg-concept-wkd-overlay',
            'bg-concept-kt',  'bg-concept-kt-overlay',
            'bg-concept-spz', 'bg-concept-spz-overlay',
            'bg-concept-epe', 'bg-concept-epe-overlay',
            'bg-concept-sfl', 'bg-concept-sfl-overlay',
            /^flatpickr-.*/,
            /^leaflet-.*/,
            /^availability-.*/,
        ],
    },
    theme: {
        container: {
            center: true,
            padding: '1rem',
        },
        fontFamily: {
            'sans': [ 'Lato', 'sans-serif' ],
        },
        screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px',
        },
        extend: {
            fontSize: {
                'xs': '.8rem',
            },
            colors: {
                overlay: {
                    black: tinycolor('#000000').setAlpha(0.85).toRgbString(),
                    white: tinycolor('#ffffff').setAlpha(0.85).toRgbString(),
                    'white-50': tinycolor('#ffffff').setAlpha(0.5).toRgbString(),
                },
                concept: {
                    default: '#0173A5',
                    bdg: '#0173A5',
                    skr: '#0173A5',
                    'skr-overlay': tinycolor('#0173A5').setAlpha(0.70).toRgbString(),
                    evt: '#BA034F',
                    'evt-overlay': tinycolor('#BA034F').setAlpha(0.70).toRgbString(),
                    fam: '#7ca7d5',
                    'fam-overlay': tinycolor('#7ca7d5').setAlpha(0.70).toRgbString(),
                    grp: '#576D02',
                    'grp-overlay': tinycolor('#576D02').setAlpha(0.70).toRgbString(),
                    prg: '#0173A5',
                    'prg-overlay': tinycolor('#0173A5').setAlpha(0.70).toRgbString(),
                    ind: '#1684DD',
                    'ind-overlay': tinycolor('#1684DD').setAlpha(0.70).toRgbString(),
                    wkd: '#96BB05',
                    'wkd-overlay': tinycolor('#96BB05').setAlpha(0.70).toRgbString(),
                    kt: '#576D02',
                    'kt-overlay': tinycolor('#576D02').setAlpha(0.70).toRgbString(),
                    spz: '#436a8a',
                    epe: '#436a8a',
                    sfl: '#4E4E51',
                    'sfl-overlay': tinycolor('#4E4E51').setAlpha(0.70).toRgbString(),
                },
                ep: {
                    primary: '#3d8ccb',
                    secondary: '#f9c700',
                    'primary-bg': '#ebf3fa',
                    'primary-light': '#009fff',
                    'primary-medium': '#165883',
                    'primary-dark': '#18527b',
                    'primary-10': tinycolor('#3d8ccb').setAlpha(0.1).toRgbString(),
                    'primary-50': tinycolor('#3d8ccb').setAlpha(0.5).toRgbString(),
                    'primary-80': tinycolor('#3d8ccb').setAlpha(0.8).toRgbString(),
                    'primary-dark-80': tinycolor('#18527b').setAlpha(0.8).toRgbString(),
                    'secondary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
                    'secondary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
                    pink: '#fa1a8c',
                    'pink-50': tinycolor('#fa1a8c').setAlpha(0.5).toRgbString(),
                },
                sbw: {
                    primary: '#f0bc44',
                    secondary: '#ee525a',
                    'primary-dark': '#c7a20c',
                    'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
                    'primary-50': tinycolor('#f0bc44').setAlpha(0.5).toRgbString(),
                    'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
                    'overlay-secondary': tinycolor('#c20000').setAlpha(0.55).toRgbString(),
                },
                snz: {
                    primary: '#82c3c6',
                    secondary: '#f9c33d',
                    'primary-dark': '#82c3c6',
                    'primary-10': tinycolor('#82C3C6').setAlpha(0.1).toRgbString(),
                    'primary-50': tinycolor('#82C3C6').setAlpha(0.5).toRgbString(),
                    'primary-80': tinycolor('#82C3C6').setAlpha(0.8).toRgbString(),
                },
                uch: {
                    primary: '#a6c62c',
                    secondary: '#19a3dc',
                    'primary-dark': '#a6c62c',
                    'primary-10': tinycolor('#a6c62c').setAlpha(0.1).toRgbString(),
                    'primary-50': tinycolor('#a6c62c').setAlpha(0.5).toRgbString(),
                    'primary-80': tinycolor('#a6c62c').setAlpha(0.8).toRgbString(),
                    'overlay-secondary': tinycolor('#a6c62c').setAlpha(0.55).toRgbString(),
                },
                ser: {
                    primary: '#006fb6',
                    secondary: '#e85243',
                    'primary-light': '#04A4CC',
                    'primary-80': tinycolor('#006fb6').setAlpha(0.8).toRgbString(),
                },
            },
            backgroundImage: {
                'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)',
                'brand-gradient': 'linear-gradient(to top right, #009fff, #165883, #18527b)',
            },
            height: {
                '128': '32rem',
            },
            inset: {
                '100': '100%',
                '1/2': '50%',
            },
            zIndex: {
                '-10': '-10',
                '100': 100,
            },
        },
    },
    variants: {
        extend: {
            backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'ser', 'ser-hover', 'ser-group-hover', 'even', 'odd' ],
            backgroundImage: [ 'ser' ],
            borderWidth: [ 'even', 'odd', 'first', 'last' ],
            textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'ser', 'ser-hover' ],
            borderColor: [ 'sbw','snz', 'uch', 'ser' ],
            display: ['group-hover', 'reduced'],
            visibility: [ 'group-hover' ],
            opacity: [ 'group-hover' ],
            rotate: [ 'group-hover' ],
            flex: [ 'reduced' ],
            flexDirection: [ 'even', 'odd', 'reduced' ],
            alignItems: [ 'reduced' ],
            padding: [ 'even', 'odd', 'first', 'last', 'reduced' ],
            margin: [ 'even', 'odd', 'first', 'last', 'reduced' ],
            maxWidth: [ 'reduced' ],
        },
    },
    plugins: [
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('tailwindcss-alt')({
            variants: ['sbw', 'snz', 'uch', 'ser'],
        }),
        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`
                })
            })
        }),
        plugin(function ({addVariant, e}) {
            addVariant('reduced', ({modifySelectors, separator}) => {
                modifySelectors(({className}) => {
                    return `.reduced .${e(`reduced${separator}${className}`)}`
                })
            })
        }),
    ],
}