import plugin from 'tailwindcss/plugin';
/**
 * This plugin adds shadows to the edges of a scrollable container when the content
 * of the container overflows.
 * The shadows use our gray color palette. You can choose which shade of gray you want.
 * Your container must not already use before & after pseudo elements.
 * If you use TWCSS before/after modifiers on this element, make sure you also manually
 * set the content property to the `--whitespace` variable. This is a workaround for TWCSS
 * automatically adding a content property to the before/after pseudo-elements, which
 * overrides the `--whitespace` variable by default.
 *
 * Class Names:
 *  btu-scrollshadow-25 - almost white.
 *  btu-scrollshadow-900 - almost black.
 *
 * Typical Usage:
 *  @apply btu-scrollshadow-25;
 *
 * Custom usage for when you need to style before/after pseudo-elements:
 *  @apply btu-scrollshadow-25 before:absolute before:content-[--whitespace] <-- must do this (see more info above);
 */
module.exports = plugin(function ({ addComponents, addBase }) {
    const shared = {
        'overflow-x': 'auto',
        '@supports (animation-timeline:--scroll-timeline)': {
            /* these 3 whitespaces dictate the width of the shadow (necessary to give the pseudo elements an intrinsic size). */
            '--whitespace': '"\u2002\u2002\u2002"',
            animation: 'detect-scroll',
            'overscroll-behavior-x': 'contain',
            'animation-fill-mode': 'none',
            'animation-timeline': '--scroll-timeline',
            'scroll-timeline': '--scroll-timeline x',
            '&:before, &:after': {
                '--visibility-if-can-scroll': 'var(--can-scroll) visible',
                '--visibility-if-cant-scroll': 'hidden',
                content: 'var(--whitespace)',
                'animation-name': 'fade-in',
                'animation-fill-mode': 'both',
                'animation-timeline': '--scroll-timeline',
                'pointer-events': 'none',
                display: 'block',
                position: 'sticky',
                bottom: '0px',
                top: '0px',
                visibility: 'var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll))',
                'z-index': '10',
            },
        },
    };
    addBase({
        '@keyframes fade-in': {
            '0%': { opacity: '0' },
            '100%': { opacity: '1' },
        },
        /* Space-toggle used to track when a scrollable element has reached the end of its scroll in either direction. */
        '@keyframes detect-scroll': {
            from: {
                '--can-scroll': '   ',
            },
            to: {
                '--can-scroll': '   ',
            },
        },
    });
    const stops = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900].forEach(n => {
        const key = `.btu-scrollshadow-${n}`;
        addComponents({
            [key]: Object.assign({}, shared, {
                '&:before': {
                    left: '0px',
                    'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
                    'animation-range': '0ch 3ch',
                },
                '&:after': {
                    right: '0px',
                    'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
                    'animation-direction': 'reverse',
                    'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
                },
                '[dir="rtl"] &:before': {
                    left: 'auto',
                    right: '0px',
                    'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
                    'animation-direction': 'reverse',
                    'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
                },
                '[dir="rtl"] &:after': {
                    right: 'auto',
                    left: '0px',
                    'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
                    'animation-direction': 'normal',
                    'animation-range': '0ch 3ch',
                },
            }),
        });
    });
});
//# sourceMappingURL=tailwind-plugin-scroll-shadow.js.map