{"version":3,"file":"slider.module.mjs","names":[],"sources":["../../../../package/common/slider/slider.module.pcss"],"sourcesContent":[".slider {\n  /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n     public `--slider-*` variables via ThemeProvider or `style` to override. */\n\n  /* Not --background-accent-light, which is Card's own surface: on a Card the track vanished. A\n     tint of the text colour shows on any surface. */\n  --custom-slider-track-color: var(--slider-track-color, color-mix(in srgb, currentcolor 20%, transparent));\n  --custom-slider-range-color: var(--slider-range-color, var(--primary-color));\n  --custom-slider-thumb-color: var(--slider-thumb-color, var(--primary-color));\n\n  /* calc, not em: an unregistered custom property substitutes as tokens, so an em would\n     resolve against whichever element uses it, and the mark label reads the thumb size while\n     sitting on the smaller --text-small-font-size. */\n  --custom-slider-thumb-size: var(--slider-thumb-size, calc(var(--default-font-size) * 1.125));\n  --custom-slider-track-height: var(--slider-track-height, calc(var(--default-font-size) * 0.375));\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  /* Fill the container, and allow shrinking when used inside a flex row so the\n     track never collapses to nothing next to a sibling (e.g. a value readout). */\n  width: 100%;\n  min-width: 0;\n  height: var(--custom-slider-thumb-size);\n  padding: 0 calc(var(--custom-slider-thumb-size) / 2);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  touch-action: none;\n  user-select: none;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  /* Two selectors because focus lands in different places per mode: on the root for a single\n     thumb, on the thumb itself in range mode, where each thumb is its own slider. */\n  &:focus-visible .slider-thumb,\n  & .slider-thumb:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--custom-slider-range-color) 30%, transparent);\n  }\n\n  &-disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Reserve room under the track for mark labels. */\n  &-has-mark-labels {\n    margin-bottom: 1.375em;\n  }\n\n  &-track {\n    position: relative;\n    flex: 1;\n    height: var(--custom-slider-track-height);\n    background-color: var(--custom-slider-track-color);\n    border-radius: 999px;\n  }\n\n  &-range {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    background-color: var(--custom-slider-range-color);\n    background-image: var(--primary-gradient, none);\n    border-radius: 999px;\n    transition: width 0.12s ease;\n  }\n\n  &-thumb {\n    position: absolute;\n    top: 50%;\n    width: var(--custom-slider-thumb-size);\n    height: var(--custom-slider-thumb-size);\n    transform: translate(-50%, -50%);\n    background-color: var(--custom-slider-thumb-color);\n    border-radius: 50%;\n    box-shadow: var(--card-shadow);\n    transition:\n      left 0.12s ease,\n      box-shadow 0.15s ease;\n  }\n\n  /* No lag between pointer and thumb/fill while dragging. */\n  &-dragging &-range,\n  &-dragging &-thumb {\n    transition: box-shadow 0.15s ease;\n  }\n\n  &-mark {\n    position: absolute;\n    top: 50%;\n    width: 0.1875em;\n    height: 0.1875em;\n    transform: translate(-50%, -50%);\n    border-radius: 50%;\n    background-color: var(--background);\n    pointer-events: none;\n  }\n\n  &-mark-label {\n    position: absolute;\n    top: calc(50% + var(--custom-slider-thumb-size));\n    transform: translateX(-50%);\n    font-size: var(--text-small-font-size, 12px);\n    color: var(--text-dark);\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  /* These em are against this bubble's own --text-small-font-size, not the slider's base, so\n     the ratios differ from everywhere else in this file: 8px and 2px of 12px. */\n  &-value {\n    position: absolute;\n    bottom: calc(100% + 0.6667em);\n    left: 50%;\n    transform: translateX(-50%);\n    padding: 0.1667em 0.6667em;\n    border-radius: var(--default-border-radius);\n    background-color: var(--background-accent-light);\n    color: var(--text-color);\n    font-size: var(--text-small-font-size, 12px);\n    white-space: nowrap;\n    pointer-events: none;\n    font-variant-numeric: tabular-nums;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slider-range,\n  .slider-thumb {\n    transition: none;\n  }\n}\n"],"mappings":""}