import plugin from 'tailwindcss/plugin';
/**
 * Upload component styling.
 *
 * Class Names:
 *
 *  btu-upload - Base upload container
 *  btu-upload-dropzone - Drop zone area
 *  btu-upload-dropzone-icon - Drop zone icon circle
 *  btu-upload-dropzone-prompt - Prompt layer wrap hosting text + drag overlay
 *  btu-upload-dropzone-text - Drop zone text (resting prompt)
 *  btu-upload-dropzone-drag-message - Drag-over message overlay (absolute, fades in on dragover)
 *  btu-upload-dropzone-action - Drop zone "select" link
 *  btu-upload-dropzone-count - Corner count pill (visible only when max-files is finite and > 1)
 *  btu-upload-dropzone-dragover - Drag-over state (dashed border + crossfade)
 *  btu-upload-dropzone-disabled - Disabled drop zone
 *  btu-upload-list - File list container
 *  btu-upload-item - Individual file item
 *  btu-upload-item-active - Active/uploading item
 *  btu-upload-item-complete - Completed upload item
 *  btu-upload-item-error - Error state item
 *  btu-upload-item-icon - File type icon (uses btu-icon emphasize)
 *  btu-upload-item-icon-error - Error variant icon color
 *  btu-upload-item-info - File info container
 *  btu-upload-item-name - File name text
 *  btu-upload-item-size - File size text
 *  btu-upload-item-progress - Progress bar container
 *  btu-upload-item-percent - Progress percentage text
 *  btu-upload-item-check - Success color override for the completion btu-icon (uses emphasize="pulse")
 *  btu-upload-item-remove - Remove button positioning (uses btu-icon-button)
 *  btu-upload-item-error-text - Error message text
 *  btu-upload-item-error-filename - Error state filename
 *  btu-upload-item-retry - Retry link
 *
 * @cssprop --upload-dropzone-bg - Drop zone background color
 * @cssprop --upload-dropzone-border-color - Drop zone border color
 * @cssprop --upload-dropzone-border-radius - Drop zone border radius
 * @cssprop --upload-dropzone-hover-bg - Drop zone hover background (hover default: gray-50; drag-over default: primary-25)
 * @cssprop --upload-dropzone-hover-border-color - Drop zone hover border
 * @cssprop --upload-dropzone-focus-ring-color - Drop zone focus ring
 * @cssprop --upload-item-bg - Item background
 * @cssprop --upload-item-border-color - Item border color
 * @cssprop --upload-item-active-border-color - Item active/in-progress border
 * @cssprop --upload-item-complete-border-color - Item completed border
 * @cssprop --upload-item-error-bg - Item error background
 * @cssprop --upload-item-error-border-color - Item error border
 */
module.exports = plugin(function ({ addComponents, theme, config }) {
    const fontSizeSm = config('theme.fontSize.sm')?.[0] ?? '0.875rem';
    const lineHeightSm = config('theme.fontSize.sm')?.[1] ?? '1.25rem';
    const fontSizeXs = config('theme.fontSize.xs')?.[0] ?? '0.75rem';
    const lineHeightXs = config('theme.fontSize.xs')?.[1] ?? '1.125rem';
    const components = {
        /* ─── Upload Container ─── */
        '.btu-upload': {
            display: 'flex',
            flexDirection: 'column',
            gap: '0.75rem',
            width: '100%',
        },
        /* ─── Drop Zone ─── */
        '.btu-upload-dropzone': {
            position: 'relative',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '0.5rem',
            padding: '16px 24px',
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: 'var(--upload-dropzone-border-color, oklch(var(--btu-theme-gray-300)))',
            borderRadius: `var(--upload-dropzone-border-radius, ${theme('borderRadius.lg')})`,
            backgroundColor: 'var(--upload-dropzone-bg, oklch(var(--btu-theme-gray-25)))',
            cursor: 'pointer',
            transition: 'background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease',
            textAlign: 'center',
            '@media (prefers-reduced-motion: reduce)': {
                transition: 'background-color 0.01ms ease, border-color 0.01ms ease, box-shadow 0.01ms ease',
            },
            '&:hover': {
                backgroundColor: 'var(--upload-dropzone-hover-bg, oklch(var(--btu-theme-gray-50)))',
                borderColor: 'var(--upload-dropzone-hover-border-color, oklch(var(--btu-theme-primary-300)))',
            },
            '&:focus-within': {
                boxShadow: '0 0 0 4px var(--upload-dropzone-focus-ring-color, oklch(var(--btu-theme-primary-100)))',
                borderColor: 'var(--upload-dropzone-hover-border-color, oklch(var(--btu-theme-primary-300)))',
            },
            /* High-contrast */
            ':root.is-moreContrast &': {
                borderColor: 'var(--upload-dropzone-border-color, oklch(var(--btu-theme-gray-400)))',
            },
            '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
                ':root:not(.is-normalContrast) &': {
                    borderColor: 'var(--upload-dropzone-border-color, oklch(var(--btu-theme-gray-400)))',
                },
            },
        },
        '.btu-upload-dropzone-icon': {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '2.5rem',
            height: '2.5rem',
            borderRadius: '9999px',
            backgroundColor: 'oklch(var(--btu-theme-gray-100))',
            color: 'oklch(var(--btu-theme-gray-500))',
            transition: 'transform 150ms ease',
            '@media (prefers-reduced-motion: reduce)': {
                transition: 'transform 0.01ms ease',
            },
        },
        /* Prompt layer wrap — hosts both the resting text and the drag-over overlay. */
        '.btu-upload-dropzone-prompt': {
            position: 'relative',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
        },
        '.btu-upload-dropzone-text': {
            fontSize: fontSizeSm,
            lineHeight: lineHeightSm,
            color: 'oklch(var(--btu-theme-gray-500))',
            transition: 'opacity 150ms ease',
            '@media (prefers-reduced-motion: reduce)': {
                transition: 'opacity 0.01ms ease',
            },
        },
        /* Drag-over message — absolutely positioned overlay so the dropzone height stays constant. */
        '.btu-upload-dropzone-drag-message': {
            position: 'absolute',
            inset: '0',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: fontSizeSm,
            lineHeight: lineHeightSm,
            color: 'oklch(var(--btu-theme-gray-500))',
            opacity: '0',
            pointerEvents: 'none',
            transition: 'opacity 150ms ease',
            '@media (prefers-reduced-motion: reduce)': {
                transition: 'opacity 0.01ms ease',
            },
        },
        '.btu-upload-dropzone-action': {
            // Button reset — the element is a <button> so default UA chrome must be cleared.
            background: 'transparent',
            border: '0',
            padding: '0',
            font: 'inherit',
            color: 'oklch(var(--btu-theme-primary-600))',
            fontWeight: '600',
            cursor: 'pointer',
            textDecoration: 'none',
            '&:hover': {
                textDecoration: 'underline',
            },
            '&:disabled': {
                cursor: 'not-allowed',
                opacity: '0.6',
            },
        },
        /* Corner count pill — shown when max-files is finite and > 1. */
        '.btu-upload-dropzone-count': {
            position: 'absolute',
            top: '0.5rem',
            right: '0.5rem',
            padding: '0.125rem 0.5rem',
            borderRadius: '9999px',
            fontSize: fontSizeXs,
            lineHeight: lineHeightXs,
            fontWeight: '500',
            backgroundColor: 'oklch(var(--btu-theme-gray-100))',
            color: 'oklch(var(--btu-theme-gray-700))',
            pointerEvents: 'none',
        },
        /* Drag-over state — dashed border + crossfade overlay. */
        '.btu-upload-dropzone-dragover': {
            borderStyle: 'dashed',
            borderWidth: '2px',
            borderColor: 'var(--upload-dropzone-hover-border-color, oklch(var(--btu-theme-primary-400)))',
            backgroundColor: 'var(--upload-dropzone-hover-bg, oklch(var(--btu-theme-primary-25)))',
            '& .btu-upload-dropzone-text': {
                opacity: '0',
            },
            '& .btu-upload-dropzone-drag-message': {
                opacity: '1',
            },
            '& .btu-upload-dropzone-icon': {
                transform: 'scale(1.15)',
            },
        },
        /* Disabled state */
        '.btu-upload-dropzone-disabled': {
            opacity: '0.5',
            pointerEvents: 'none',
            cursor: 'default',
            backgroundColor: 'var(--upload-dropzone-bg, oklch(var(--btu-theme-gray-50)))',
            borderColor: 'var(--upload-dropzone-border-color, oklch(var(--btu-theme-gray-200)))',
        },
        /* ─── File List ─── */
        '.btu-upload-list': {
            display: 'flex',
            flexDirection: 'column',
            gap: '0.5rem',
            margin: '0',
            padding: '0',
            listStyle: 'none',
        },
        /* ─── Upload Item ─── */
        '.btu-upload-item': {
            display: 'flex',
            alignItems: 'flex-start',
            gap: '0.75rem',
            padding: '0.75rem 1rem',
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: 'var(--upload-item-border-color, oklch(var(--btu-theme-gray-200)))',
            borderRadius: theme('borderRadius.lg'),
            backgroundColor: 'var(--upload-item-bg, var(--btu-theme-white))',
        },
        /* Active/uploading state */
        '.btu-upload-item-active': {
            borderColor: 'var(--upload-item-active-border-color, oklch(var(--btu-theme-gray-300)))',
        },
        /* Complete state */
        '.btu-upload-item-complete': {
            borderColor: 'var(--upload-item-complete-border-color, oklch(var(--btu-theme-primary-500)))',
        },
        /* Error state */
        '.btu-upload-item-error': {
            backgroundColor: 'var(--upload-item-error-bg, oklch(var(--btu-theme-error-25)))',
            borderColor: 'var(--upload-item-error-border-color, oklch(var(--btu-theme-error-300)))',
        },
        /* ─── Icon (uses btu-icon emphasize for tonal circle) ─── */
        '.btu-upload-item-icon': {
            flexShrink: '0',
            color: 'oklch(var(--btu-theme-primary-600))',
        },
        '.btu-upload-item-icon-error': {
            color: 'oklch(var(--btu-theme-error-600))',
        },
        /* ─── Item Info ─── */
        '.btu-upload-item-info': {
            display: 'flex',
            flexDirection: 'column',
            flex: '1',
            minWidth: '0',
            gap: '0.25rem',
        },
        '.btu-upload-item-name': {
            fontSize: fontSizeSm,
            lineHeight: lineHeightSm,
            fontWeight: '500',
            color: 'oklch(var(--btu-theme-gray-700))',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
        },
        '.btu-upload-item-size': {
            fontSize: fontSizeXs,
            lineHeight: lineHeightXs,
            color: 'oklch(var(--btu-theme-gray-500))',
        },
        '.btu-upload-item-progress': {
            display: 'flex',
            alignItems: 'center',
            gap: '0.5rem',
            width: '100%',
        },
        '.btu-upload-item-percent': {
            fontSize: fontSizeXs,
            lineHeight: lineHeightXs,
            color: 'oklch(var(--btu-theme-gray-500))',
            flexShrink: '0',
            minWidth: '2rem',
            textAlign: 'right',
        },
        /* Scoped under .btu-upload-item so this still wins over the dark-theme
           icon color. flex-shrink:0 keeps the circle round in the progress row. */
        '.btu-upload-item btu-icon.btu-upload-item-check': {
            flexShrink: '0',
            color: 'oklch(var(--btu-theme-success-600))',
        },
        /* ─── Remove Button (uses btu-icon-button destructive) ─── */
        '.btu-upload-item-remove': {
            alignSelf: 'flex-start',
            flexShrink: '0',
        },
        /* ─── Error Text ─── */
        '.btu-upload-item-error-text': {
            fontSize: fontSizeSm,
            lineHeight: lineHeightSm,
            color: 'oklch(var(--btu-theme-error-600))',
        },
        '.btu-upload-item-error-filename': {
            fontSize: fontSizeXs,
            lineHeight: lineHeightXs,
            color: 'oklch(var(--btu-theme-gray-500))',
        },
        /* ─── Retry Link ─── */
        '.btu-upload-item-retry': {
            fontSize: fontSizeSm,
            lineHeight: lineHeightSm,
            fontWeight: '600',
            color: 'oklch(var(--btu-theme-error-600))',
            cursor: 'pointer',
            textDecoration: 'none',
            textAlign: 'left',
            alignSelf: 'flex-start',
            background: 'none',
            border: 'none',
            padding: '0',
            '&:hover': {
                textDecoration: 'underline',
            },
        },
    };
    addComponents(components);
});
//# sourceMappingURL=tailwind-plugin-upload.js.map