{"version":3,"file":"slider.css.cjs","names":[],"sources":["../../../src/inputs/slider/slider.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  /* No unconditional `width: 100%` here, on purpose — matches every other field's own `:host`\n     (`ore-input`, `ore-select`, `ore-number-input`, `ore-combobox`, `ore-date-picker`): shrink to\n     `min-width` by default, opt into full width via `:host([fullwidth])` below. A hardcoded\n     `width: 100%` here (the previous default) meant the slider always claimed the entire row in\n     a flex layout regardless of layout intent — e.g. sitting next to a label/hint column in a\n     settings-style row, it forced that column down to near its text's min-content width instead\n     of sharing the row the way a same-row `ore-select`/`ore-number-input` naturally does. */\n  :host {\n    --_size: var(--slider-size, var(--size-5));\n    --_height: var(--slider-height, var(--size-1));\n    --_track: var(--slider-track-bg, var(--color-contrast-300));\n    --_fill: var(--slider-fill, var(--color-neutral));\n    --_thumb: var(--slider-thumb-bg, var(--color-contrast-50));\n    --_thumb-size: var(--_size);\n    --_thumb-inset: var(--slider-thumb-inset, var(--size-2-5));\n    --_touch-target: var(--size-11);\n    --_font-size: var(--text-sm);\n    --_shadow: var(--color-neutral-focus-shadow);\n\n    position: relative;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-3));\n    align-items: center;\n    min-width: var(--slider-min-width, 12rem);\n    touch-action: none;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* Explicit opt-in still forces full width outside a stretching grid/flex context — same\n     convention as ore-input's own :host([fullwidth]). */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Track, Fill & Thumb\n     ======================================== */\n\n.slider-container {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  min-height: var(--_touch-target);\n  padding-inline: var(--_thumb-inset);\n}\n\n.slider-track {\n  position: relative;\n  width: 100%;\n  height: var(--_height);\n  background: var(--_track);\n  border-radius: var(--rounded-full);\n}\n\n/* Fill: always driven by --_fill-start / --_fill-width */\n.slider-fill {\n  position: absolute;\n  top: 0;\n  left: var(--_fill-start, 0%);\n  width: var(--_fill-width, 0%);\n  height: 100%;\n  background: var(--_fill);\n  border-radius: var(--rounded-full);\n  transition: var(--_motion-transition, left var(--transition-fast), width var(--transition-fast));\n}\n\n:host([data-dragging]) .slider-fill {\n  transition: none;\n}\n\n.slider-thumb {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  box-sizing: border-box;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  cursor: grab;\n  background: var(--_thumb);\n  border: 2px solid var(--_fill);\n  border-radius: var(--rounded-full);\n  box-shadow: var(--shadow-sm);\n  transform: translate(-50%, -50%);\n  transition: var(--_motion-transition, box-shadow var(--transition-fast), left var(--transition-fast));\n  will-change: transform;\n}\n\n:host([data-dragging]) .slider-thumb {\n  cursor: grabbing;\n  box-shadow: var(--_shadow);\n  transition: var(--_motion-transition, box-shadow var(--transition-fast));\n}\n\n/* ── Single-value thumb ─────────────────────────────────── */\n\n.slider-thumb-sole {\n  left: var(--_thumb-pos, 0%);\n}\n\n:host(:focus-visible) .slider-thumb-sole,\n:host(:active) .slider-thumb-sole {\n  box-shadow: var(--_shadow);\n}\n\n/* ── Range thumbs ───────────────────────────────────────── */\n\n.slider-thumb-start {\n  left: var(--_thumb-start, 0%);\n}\n\n.slider-thumb-end {\n  left: var(--_thumb-end, 100%);\n}\n\n.slider-thumb-start:focus-visible,\n.slider-thumb-end:focus-visible {\n  z-index: 2;\n  outline: var(--border-2) solid var(--_fill);\n  outline-offset: var(--size-0-5);\n  box-shadow: var(--_shadow);\n}\n\n/* ── Visibility gating ──────────────────────────────────── */\n\n:host(:not([range])) .slider-thumb-start,\n:host(:not([range])) .slider-thumb-end {\n  display: none;\n}\n\n:host([range]) .slider-thumb-sole {\n  display: none;\n}\n\n@media (hover: hover) {\n  :host(:not([disabled])) .slider-thumb:hover {\n    box-shadow: var(--_shadow);\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:focus-visible) .slider-thumb-sole,\n  .slider-thumb-start:focus-visible,\n  .slider-thumb-end:focus-visible {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n    box-shadow: none;\n  }\n}\n\n@layer refine.overrides {\n  :host {\n    --_fill: var(--slider-fill, var(--_theme-base));\n    --_shadow: var(--_theme-shadow);\n  }\n}\n\n/* ========================================\n     Label\n     ======================================== */\n\n.label {\n  font-size: var(--_font-size);\n  color: var(--color-contrast);\n  white-space: nowrap;\n}\n\n.helper-text[hidden] {\n  display: none;\n}\n\n.helper-text {\n  width: 100%;\n  font-size: var(--text-xs);\n  line-height: var(--leading-tight);\n  color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n}\n\n.helper-text[role='alert'] {\n  color: var(--color-error);\n}\n"],"mappings":""}