import { formsBaseTheme } from '../forms.theme.js';

const sliderTheme = {
    // Wrapper styles
    wrapperStyle: formsBaseTheme.wrapperStyle,
    // Label styles
    labelStyle: "block text-base font-medium text-[var(--color-text-primary)] mb-2",
    // Helper text styles
    helperTextStyle: formsBaseTheme.helperText,
    // Root container with layout
    rootStyle: "relative flex items-center w-full touch-none select-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-full",
    // Track (background)
    trackStyle: "relative w-full h-2 grow rounded-full bg-[var(--color-background-tertiary)] overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full shadow-inner",
    // Range (filled portion) - rounded to match track clipping
    rangeStyle: "absolute h-full bg-gradient-to-r from-[var(--color-primary-500)] to-[var(--color-primary-700)] transition-all rounded-full data-[disabled]:bg-[var(--color-background-disabled)] data-[invalid]:bg-[var(--color-danger)]",
    // Thumb (draggable handle)
    thumbStyle: "block h-5 w-7 rounded-full bg-transparent overflow-hidden cursor-grab active:cursor-grabbing active:scale-x-110 active:scale-y-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 data-[disabled]:cursor-not-allowed data-[disabled]:hover:scale-100 data-[invalid]:focus-visible:ring-[var(--color-danger)]",
    // Value display
    valueDisplayStyle: "text-base font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
    // Min/max labels
    minMaxLabelStyle: "text-base font-medium text-[var(--color-text-muted)]",
    // Tick marks
    tickStyle: "absolute w-0.5 h-2 bg-[var(--color-border)] -translate-x-0.5 pointer-events-none",
};

export { sliderTheme };
