/* src/components/basic/XWUIInputSlider/XWUIInputSlider.css */
/**
 * XWUIInputSlider Component Styles - Production Quality
 * 100% Styles System Integration
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Theme: theme/roundness/slider/*.css (MANDATORY - provides slider roundness variables)
 * - Typography: theme/typography/*.css
 */

/* ============================================
   WRAPPER
   ============================================ */
.xwui-slider {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    font-family: var(--font-family-base);
}

/* Label */
.xwui-slider__label {
    font-size: var(--xwui-field-label-size, var(--font-size-sm, 0.875rem));
    font-weight: var(--xwui-field-label-weight, var(--font-weight-medium, 500));
    color: var(--xwui-field-label-color, var(--text-primary));
    margin-bottom: var(--xwui-field-label-gap, 0.375rem);
    font-family: var(--xwui-field-label-family, var(--font-label-family, var(--font-family-base, sans-serif)));
    line-height: var(--xwui-field-label-line-height, 1.5);
}

/* Title/Direction label */
.xwui-slider__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-inverse, #ffffff);
    text-align: center;
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.xwui-slider--vertical .xwui-slider__title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 0;
    margin-inline-end: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-xs);
}

/* ============================================
   CONTAINER & TRACK WRAPPER
   ============================================ */
.xwui-slider__container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.xwui-slider__icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.xwui-slider__track-wrapper {
    flex: 1;
    position: relative;
    padding: var(--spacing-sm) 0;
}

/* Icon */
.xwui-slider__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse, #ffffff);
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

/* Icon with better contrast - use white by default, allow override */
.xwui-slider__icon svg {
    color: var(--text-inverse, #ffffff);
    fill: currentColor;
    stroke: currentColor;
}

.xwui-slider--disabled .xwui-slider__icon {
    opacity: 0.5;
}

/* ============================================
   RAIL & TRACK
   ============================================ */
.xwui-slider__rail {
    position: relative;
    width: 100%;
    height: 100%;
}

.xwui-slider__track {
    position: relative;
    width: 100%;
    /* Track background - uses a tinted overlay of --text-primary instead of
       --bg-secondary. Reason: on every dark theme (dark, night, azure-forge,
       catppuccin-*), --bg-secondary is defined as the same value as --bg-card,
       which made the unfilled rail invisible against the card surface.
       color-mix on --text-primary produces a subtle contrast that works on
       both light and dark themes. The var() line is a fallback for browsers
       without color-mix support. */
    background: var(--bg-tertiary, var(--bg-secondary, var(--control-bg)));
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
    border-radius: var(--radius-slider-track, var(--radius-control, var(--radius-sm)));
    cursor: pointer;
    touch-action: none;
    -webkit-user-select: none;
            user-select: none;
}

/* Size variants. The three dimensions the rail, thumb and marks all derive
   their geometry from are declared ONCE per size, so the marks can hang clear
   of the thumb (half the thumb plus a gap) without a second copy of the sizes. */
.xwui-slider {
    --xwui-slider-track-size: 6px;
    --xwui-slider-thumb-size: 18px;
    --xwui-slider-dot-size: 4px;
}
:is(.xwui-slider--s,.xwui-slider--sm) {
    --xwui-slider-track-size: 4px;
    --xwui-slider-thumb-size: 14px;
    --xwui-slider-dot-size: 3px;
}
:is(.xwui-slider--l,.xwui-slider--lg) {
    --xwui-slider-track-size: 8px;
    --xwui-slider-thumb-size: 22px;
    --xwui-slider-dot-size: 5px;
}

/* Size variants - Track height */
.xwui-slider__track {
    height: var(--xwui-slider-track-size);
}

/* Vertical orientation - ensure parent container has height */
:has(> .xwui-slider--vertical) {
    height: 100%;
    display: flex;
    align-items: stretch;
}

.xwui-slider--vertical {
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    width: auto;
    min-height: 200px;
}

.xwui-slider--vertical .xwui-slider__label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 0;
    margin-inline-end: var(--spacing-xs);
    flex-shrink: 0;
}

.xwui-slider--vertical .xwui-slider__container {
    flex-direction: column;
    width: auto;
    height: 100%;
    min-height: 200px;
}

.xwui-slider--vertical .xwui-slider__icons {
    flex-direction: column;
    width: auto;
    height: 100%;
}

.xwui-slider--vertical .xwui-slider__track-wrapper {
    height: 100%;
    width: auto;
    padding: 0 var(--spacing-sm);
    flex: 1;
}

.xwui-slider--vertical .xwui-slider__rail {
    height: 100%;
    width: auto;
}

.xwui-slider--vertical .xwui-slider__track {
    width: var(--xwui-slider-track-size);
    height: 100%;
}

/* ============================================
   FILL (Active portion)
   ============================================ */
.xwui-slider__fill {
    position: absolute;
    background: var(--accent-primary, var(--control-active));
    border-radius: var(--radius-slider-track, var(--radius-control, var(--radius-sm)));
    transition: all 0.2s ease;
    pointer-events: none;
}

/* Horizontal fill - left/width here are base fallbacks only. The view.ts fillStyle() function sets the real geometry as an inline style every frame, already RTL-flipped via valuePercentToLeft(percent, rtl) = 100 - percent when rtl. That JS math is the component's actual (working) direction handling, so these CSS fallbacks - and the matching vertical-mode left:0 below, and .xwui-slider__thumb/.xwui-slider__mark's left values - stay physical on purpose: converting them to logical properties would not change behavior (the inline style always wins) and would misstate where direction is actually handled. */
.xwui-slider__fill {
    left: 0;
    top: 0;
    height: 100%;
}

/* Vertical fill */
.xwui-slider--vertical .xwui-slider__fill {
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
}

/* Color variants */
.xwui-slider--primary .xwui-slider__fill {
    background: var(--accent-primary, var(--control-active));
    box-shadow: var(--glow-slider-track-active, none);
}

.xwui-slider--secondary .xwui-slider__fill {
    background: var(--accent-light, var(--accent-primary));
}

.xwui-slider--success .xwui-slider__fill {
    background: var(--accent-success);
}

.xwui-slider--warning .xwui-slider__fill {
    background: var(--accent-warning);
}

.xwui-slider--error .xwui-slider__fill {
    background: var(--accent-error);
}

.xwui-slider--info .xwui-slider__fill {
    background: var(--accent-primary, var(--control-active));
}

/* Inverted track */
.xwui-slider--track-inverted .xwui-slider__fill {
    background: var(--bg-secondary, var(--control-bg));
}

.xwui-slider--track-inverted.xwui-slider--primary .xwui-slider__fill {
    background: var(--accent-primary, var(--control-active));
    opacity: 0.3;
}

/* ============================================
   THUMB
   ============================================ */
.xwui-slider__thumb {
    position: absolute;
    background: var(--bg-primary, var(--control-bg));
    border: var(--border-width-thick) solid var(--accent-primary, var(--control-active));
    border-radius: var(--radius-slider-thumb, 50%);
    cursor: grab;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    z-index: 1;
    touch-action: none;
    -webkit-user-select: none;
            user-select: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Size variants - Thumb (sizes come from the per-size tokens above). */
.xwui-slider__thumb {
    width: var(--xwui-slider-thumb-size);
    height: var(--xwui-slider-thumb-size);
}

/* Horizontal thumb positioning */
.xwui-slider__thumb {
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Vertical thumb positioning */
.xwui-slider--vertical .xwui-slider__thumb {
    left: 50%;
    transform: translate(-50%, 50%);
}

/* Hover state · expanding themed halo (accent color at 50% alpha). The
   bigger ring appears around the thumb on hover; the color tracks the
   active theme because it's built off --accent-primary.
   WHY: CSS custom-property tokens let consumers override only the halo
   sizes from site-level CSS without needing !important specificity hacks. */
.xwui-slider__thumb:hover:not(:disabled),
.xwui-slider__thumb--hovered {
    box-shadow: 0 0 0 var(--xwui-slider-thumb-halo-size-hover, 10px) var(--xwui-slider-thumb-halo-color, color-mix(in srgb, var(--accent-primary) 50%, transparent));
}

/* Focus state */
.xwui-slider__thumb:focus-visible {
    outline: var(--border-width-thick) solid var(--accent-primary, var(--control-active));
    outline-offset: 2px;
    box-shadow: 0 0 0 var(--xwui-slider-thumb-halo-size-focus, 6px) var(--xwui-slider-thumb-halo-color-focus, color-mix(in srgb, var(--accent-primary) 35%, transparent));
}

/* Active/Dragging state · slightly larger halo for pressed feedback. */
.xwui-slider__thumb--active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 0 var(--xwui-slider-thumb-halo-size-active, 14px) var(--xwui-slider-thumb-halo-color, color-mix(in srgb, var(--accent-primary) 50%, transparent));
    z-index: 2;
}

.xwui-slider--vertical .xwui-slider__thumb--active {
    transform: translate(-50%, 50%) scale(1.15);
}

/* Color variants - Thumb border */
.xwui-slider--primary .xwui-slider__thumb {
    border-color: var(--accent-primary, var(--control-active));
}

.xwui-slider--secondary .xwui-slider__thumb {
    border-color: var(--accent-light, var(--accent-primary));
}

.xwui-slider--success .xwui-slider__thumb {
    border-color: var(--accent-success);
}

.xwui-slider--warning .xwui-slider__thumb {
    border-color: var(--accent-warning);
}

.xwui-slider--error .xwui-slider__thumb {
    border-color: var(--accent-error);
}

.xwui-slider--info .xwui-slider__thumb {
    border-color: var(--accent-primary, var(--control-active));
}

/* ============================================
   THUMB CONTENT (Emoji/Shape/Image)
   ============================================ */
.xwui-slider__thumb-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.75em;
    overflow: hidden;
}

.xwui-slider__thumb-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.xwui-slider__thumb-content svg {
    width: 100%;
    height: 100%;
}

/* Shape variants */
.xwui-slider__thumb-content--shape-square {
    border-radius: var(--radius-sm);
}

.xwui-slider__thumb-content--shape-diamond {
    border-radius: 0;
    transform: rotate(45deg);
}

/* Star shape is handled by content (emoji/SVG) */

/* ============================================
   HIDDEN NATIVE INPUT (Accessibility)
   ============================================ */
.xwui-slider__thumb input[type="range"] {
    /* Already styled inline, but ensure it's truly hidden */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* ============================================
   TOOLTIP (Value Label) - Nested Structure
   ============================================ */
.xwui-slider__tooltip {
    position: absolute;
    bottom: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--spacing-xs);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

/* Tooltip circle wrapper - Clear, prominent styling */
.xwui-slider__tooltip-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--accent-primary, var(--control-active, #4f46e5));
    color: var(--text-inverse, #ffffff);
    border-radius: var(--radius-tooltip, var(--radius-sm));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--accent-primary, var(--control-active, #4f46e5));
    min-width: 24px;
    min-height: 24px;
}

/* Color variants for tooltip circle */
.xwui-slider--primary .xwui-slider__tooltip-circle {
    background: var(--accent-primary, var(--control-active, #4f46e5));
    border-color: var(--accent-primary, var(--control-active, #4f46e5));
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--secondary .xwui-slider__tooltip-circle {
    background: var(--accent-light, var(--accent-primary, #6366f1));
    border-color: var(--accent-light, var(--accent-primary, #6366f1));
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--success .xwui-slider__tooltip-circle {
    background: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--warning .xwui-slider__tooltip-circle {
    background: var(--accent-warning, #f59e0b);
    border-color: var(--accent-warning, #f59e0b);
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--error .xwui-slider__tooltip-circle {
    background: var(--accent-error, #ef4444);
    border-color: var(--accent-error, #ef4444);
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--info .xwui-slider__tooltip-circle {
    background: var(--accent-primary, var(--control-active, #4f46e5));
    border-color: var(--accent-primary, var(--control-active, #4f46e5));
    color: var(--text-inverse, #ffffff);
}

/* Tooltip label text */
.xwui-slider__tooltip-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-align: center;
}

/* Visible state */
.xwui-slider__tooltip--visible {
    opacity: 1;
    visibility: visible;
}

/* Always visible (open) state for valueLabelDisplay="on" */
.xwui-slider__tooltip--open {
    opacity: 1;
    visibility: visible;
}

/* Vertical tooltip */
.xwui-slider--vertical .xwui-slider__tooltip {
    bottom: auto;
    inset-inline-start: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
    margin-inline-start: var(--spacing-xs);
}

/* ============================================
   MARKS
   ============================================ */
/* The marks layer is exactly the rail's box (= the track's box), so a mark's
   `left: N%` is a position ALONG THE TRACK and its dot is centred ON the rail
   line. The labels hang below that line, clear of the thumb: from the rail
   edge, half the thumb's overhang plus a gap. Horizontal positions are physical
   percentages that the view already mirrors for RTL, so the centring here is
   physical too; the vertical layout is entirely logical. */
.xwui-slider__marks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.xwui-slider__mark {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.xwui-slider__mark-dot {
    display: block;
    width: var(--xwui-slider-dot-size);
    height: var(--xwui-slider-dot-size);
    /* The dot rides the unfilled rail: --border-color is a 5% wash on the dark
       grounds and vanished there, so it is the tertiary text ink instead. */
    background: var(--text-tertiary, var(--border-color, var(--control-border)));
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

/* Active marks sit inside the filled part of the rail: ink them for the fill. */
.xwui-slider__mark--active .xwui-slider__mark-dot {
    background: var(--role-primary-fg, var(--text-inverse));
}

.xwui-slider__mark-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(var(--xwui-slider-thumb-size) / 2 + var(--spacing-xs));
    font-size: var(--font-size-xs);
    color: var(--text-secondary, var(--control-text-secondary));
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Active mark label state */
.xwui-slider__mark-label--active {
    color: var(--text-primary, var(--control-text));
    font-weight: var(--font-weight-medium);
}

/* Room for the hanging labels (half the thumb, a gap, one line of text) and for
   the half-label that the first and last marks hang past the rail's ends, so
   neither lands on the control that follows the slider. */
.xwui-slider--has-mark-labels:not(.xwui-slider--vertical) .xwui-slider__container {
    padding-bottom: calc(var(--xwui-slider-thumb-size) / 2 + var(--spacing-xs) + var(--font-size-xs) * 1.5);
}

/* Vertical: the dot sits on the track's centre line (logical start offset, so
   it follows the track in RTL) and the label flows to the inline end of it. */
.xwui-slider--vertical .xwui-slider__mark {
    top: auto;
    inset-inline-start: calc(var(--xwui-slider-track-size) / 2);
    margin-inline-start: calc(var(--xwui-slider-dot-size) / -2);
    transform: translateY(50%);
}

.xwui-slider--vertical .xwui-slider__mark-label {
    top: 50%;
    left: auto;
    inset-inline-start: 100%;
    transform: translateY(-50%);
    margin-top: 0;
    margin-inline-start: calc(var(--xwui-slider-thumb-size) / 2 + var(--spacing-xs));
}

/* ============================================
   STEPPERS
   ============================================ */
.xwui-slider__steppers {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.xwui-slider--vertical .xwui-slider__steppers {
    flex-direction: row;
}

.xwui-slider__stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-height-sm, 28px);
    height: var(--size-control-height-sm, 28px);
    padding: 0;
    background: var(--bg-primary, var(--control-bg));
    border: var(--border-width-thin) solid var(--border-color, var(--control-border));
    border-radius: var(--radius-button, var(--radius-sm));
    color: var(--text-primary, var(--control-text));
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-user-select: none;
            user-select: none;
}

.xwui-slider__stepper:hover:not(:disabled) {
    background: var(--bg-hover, var(--control-bg-hover));
    border-color: var(--accent-primary, var(--control-active));
    color: var(--accent-primary, var(--control-active));
}

.xwui-slider__stepper:active:not(:disabled) {
    background: var(--bg-active, var(--control-bg-active));
    transform: scale(0.95);
}

.xwui-slider__stepper:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   DISABLED STATE
   ============================================ */
.xwui-slider--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.xwui-slider--disabled .xwui-slider__track,
.xwui-slider--disabled .xwui-slider__thumb {
    cursor: not-allowed;
}

.xwui-slider--disabled .xwui-slider__thumb:hover {
    box-shadow: none;
    transform: translate(-50%, -50%);
}

.xwui-slider--disabled .xwui-slider__stepper {
    cursor: not-allowed;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.xwui-slider__thumb[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Screen reader only */
.xwui-slider__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .xwui-slider { --xwui-slider-thumb-size: 20px; }
    :is(.xwui-slider--s,.xwui-slider--sm) { --xwui-slider-thumb-size: 16px; }
    :is(.xwui-slider--l,.xwui-slider--lg) { --xwui-slider-thumb-size: 24px; }
}

/* ============================================
   VALUE EDIT LABELS (min / current / max)
   ============================================ */
/* Compact, click-to-edit value labels shown when displayInputMin /
   displayInputCurrent / displayInputMax are enabled. MIN sits at the start
   edge of the track, MAX at the end edge, CURRENT is centred above. Clicking a
   label swaps it for an inline text <input>. No headings, no boxes. */
.xwui-slider__edit {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary, var(--control-text-secondary));
    white-space: nowrap;
    cursor: text;
    border-radius: var(--radius-sm, 4px);
    padding: 0 2px;
    transition: color 0.12s ease, background-color 0.12s ease;
}
.xwui-slider__edit:hover,
.xwui-slider__edit:focus-visible {
    color: var(--text-primary, var(--control-text));
    background: var(--bg-hover, var(--control-bg-hover, rgba(0, 0, 0, 0.06)));
    outline: none;
}

/* MIN / MAX flank the rail; the rail flexes to fill the space between them. */
.xwui-slider__edge { flex-shrink: 0; }
.xwui-slider__edge--min { margin-inline-end: var(--spacing-xs); }
.xwui-slider__edge--max { margin-inline-start: var(--spacing-xs); }
.xwui-slider--has-edges .xwui-slider__rail {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* CURRENT - value feedback centred above the track. */
.xwui-slider__value {
    display: block;
    text-align: center;
    margin-bottom: 2px;
}

/* The inline editor that replaces a label on click. */
.xwui-slider__edit-input {
    width: 5ch;
    min-width: 3ch;
    font: inherit;
    color: var(--text-primary, var(--control-text));
    text-align: center;
    border: var(--border-width-thin, 1px) solid var(--accent-primary, var(--control-active));
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #fff);
    padding: 0 2px;
    box-sizing: content-box;
}
.xwui-slider__value .xwui-slider__edit-input { width: 6ch; }

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
/* Dark mode is automatically handled via theme/colors/{theme}.css files */
/* Custom overrides can be added here if needed */

/* Generated shared control scale: tools/build-styles/control-size-contract.mjs */
:is(.xwui-slider.xwui-slider--xxxxs,.xwui-slider.xwui-slider--4xs) { --xwui-control-height: var(--xwui-input-height-xxxxs); --xwui-control-font-size: var(--xwui-size-font-xxxxs); }
:is(.xwui-slider.xwui-slider--xxxxs,.xwui-slider.xwui-slider--4xs) .xwui-slider__container { min-height: var(--xwui-input-height-xxxxs); }
:is(.xwui-slider.xwui-slider--xxxs,.xwui-slider.xwui-slider--3xs) { --xwui-control-height: var(--xwui-input-height-xxxs); --xwui-control-font-size: var(--xwui-size-font-xxxs); }
:is(.xwui-slider.xwui-slider--xxxs,.xwui-slider.xwui-slider--3xs) .xwui-slider__container { min-height: var(--xwui-input-height-xxxs); }
:is(.xwui-slider.xwui-slider--xxs,.xwui-slider.xwui-slider--2xs,.xwui-slider.xwui-slider--tiny) { --xwui-control-height: var(--xwui-input-height-xxs); --xwui-control-font-size: var(--xwui-size-font-xxs); }
:is(.xwui-slider.xwui-slider--xxs,.xwui-slider.xwui-slider--2xs,.xwui-slider.xwui-slider--tiny) .xwui-slider__container { min-height: var(--xwui-input-height-xxs); }
.xwui-slider.xwui-slider--xs { --xwui-control-height: var(--xwui-input-height-xs); --xwui-control-font-size: var(--xwui-size-font-xs); }
.xwui-slider.xwui-slider--xs .xwui-slider__container { min-height: var(--xwui-input-height-xs); }
:is(.xwui-slider.xwui-slider--sm,.xwui-slider.xwui-slider--s,.xwui-slider.xwui-slider--small) { --xwui-control-height: var(--xwui-input-height-sm); --xwui-control-font-size: var(--xwui-size-font-sm); }
:is(.xwui-slider.xwui-slider--sm,.xwui-slider.xwui-slider--s,.xwui-slider.xwui-slider--small) .xwui-slider__container { min-height: var(--xwui-input-height-sm); }
:is(.xwui-slider.xwui-slider--md,.xwui-slider.xwui-slider--m,.xwui-slider.xwui-slider--medium) { --xwui-control-height: var(--xwui-input-height-md); --xwui-control-font-size: var(--xwui-size-font-md); }
:is(.xwui-slider.xwui-slider--md,.xwui-slider.xwui-slider--m,.xwui-slider.xwui-slider--medium) .xwui-slider__container { min-height: var(--xwui-input-height-md); }
:is(.xwui-slider.xwui-slider--lg,.xwui-slider.xwui-slider--l,.xwui-slider.xwui-slider--large) { --xwui-control-height: var(--xwui-input-height-lg); --xwui-control-font-size: var(--xwui-size-font-lg); }
:is(.xwui-slider.xwui-slider--lg,.xwui-slider.xwui-slider--l,.xwui-slider.xwui-slider--large) .xwui-slider__container { min-height: var(--xwui-input-height-lg); }
.xwui-slider.xwui-slider--xl { --xwui-control-height: var(--xwui-input-height-xl); --xwui-control-font-size: var(--xwui-size-font-xl); }
.xwui-slider.xwui-slider--xl .xwui-slider__container { min-height: var(--xwui-input-height-xl); }
:is(.xwui-slider.xwui-slider--xxl,.xwui-slider.xwui-slider--2xl) { --xwui-control-height: var(--xwui-input-height-xxl); --xwui-control-font-size: var(--xwui-size-font-xxl); }
:is(.xwui-slider.xwui-slider--xxl,.xwui-slider.xwui-slider--2xl) .xwui-slider__container { min-height: var(--xwui-input-height-xxl); }
:is(.xwui-slider.xwui-slider--xxxl,.xwui-slider.xwui-slider--3xl) { --xwui-control-height: var(--xwui-input-height-xxxl); --xwui-control-font-size: var(--xwui-size-font-xxxl); }
:is(.xwui-slider.xwui-slider--xxxl,.xwui-slider.xwui-slider--3xl) .xwui-slider__container { min-height: var(--xwui-input-height-xxxl); }
:is(.xwui-slider.xwui-slider--xxxxl,.xwui-slider.xwui-slider--4xl) { --xwui-control-height: var(--xwui-input-height-xxxxl); --xwui-control-font-size: var(--xwui-size-font-xxxxl); }
:is(.xwui-slider.xwui-slider--xxxxl,.xwui-slider.xwui-slider--4xl) .xwui-slider__container { min-height: var(--xwui-input-height-xxxxl); }

/* Generated native control surfaces: tools/build-styles/native-control-contract.mjs */
.xwui-slider__edit-input {
    height: var(--xwui-control-height, var(--xwui-input-height-md));
    min-height: var(--xwui-control-height, var(--xwui-input-height-md));
    box-sizing: border-box;
    font-family: var(--font-input-family, var(--font-family-base, sans-serif));
    font-size: var(--xwui-control-font-size, var(--xwui-size-font-md));
}