/* docara-shell-source: runtime/component/range-slider/css/range-slider.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  .sf-range-slider {
    min-height: var(--sf-ui-1\/3--control-height);
    min-height: var(--sf-thumb-handle--height, var(--sf-ui-1\/3--control-height));
    position: relative;
    touch-action: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .sf-range-slider .sf-range-slider-base {
    height: var(--sf-ui-1\/3--control-height);
    height: var(--sf-thumb-handle--height, var(--sf-ui-1\/3--control-height));
    position: relative;
    width: 100%;
  }
  .sf-range-slider .sf-range-slider-track {
    left: 0;
    right: 0;
    inset-inline: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 0;
  }
  .sf-range-slider .sf-range-slider-progress {
    height: var(--sf-a4);
    height: var(--sf-range-slider-track--height, var(--sf-a4));
    left: 0;
    right: 0;
    inset-inline: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 1;
  }
  .sf-range-slider .sf-range-slider-progress-line,
  .sf-range-slider .sf-range-slider-origin {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform-style: flat;
            transform-style: flat;
    width: 100%;
    will-change: transform;
  }
  .sf-range-slider .sf-range-slider-handle {
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: -webkit-grab;
    cursor: grab;
    height: var(--sf-ui-1\/3--control-height);
    height: var(--sf-thumb-handle--height, var(--sf-ui-1\/3--control-height));
    outline: none;
    position: absolute;
    top: 0;
    width: var(--sf-ui-1\/3--control-height);
    width: var(--sf-thumb-handle--width, var(--sf-ui-1\/3--control-height));
    z-index: 2;
  }
  .sf-range-slider .sf-range-slider-touch-area {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    cursor: inherit;
    position: absolute;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-origin {
    right: auto;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-origin {
    right: auto;
    }
  }
  .sf-range-slider .sf-range-slider-origin:where(:dir(ltr)) {
    right: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-origin {
    left: auto;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-origin {
    left: auto;
    }
  }
  .sf-range-slider .sf-range-slider-origin:where(:dir(rtl)) {
    left: auto;
  }
  .sf-range-slider .sf-range-slider-origin {
    height: 0;
    block-size: 0;
    width: 0;
    inline-size: 0;
    inset-inline-end: auto;
    position: absolute;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-handle-lower,html:not([dir="rtl"])
  .sf-range-slider .sf-range-slider-handle-upper {
    right: auto;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-handle-lower,html:not([dir="rtl"])
  .sf-range-slider .sf-range-slider-handle-upper {
    right: auto;
    }
  }
  .sf-range-slider .sf-range-slider-handle-lower:where(:dir(ltr)),
  .sf-range-slider .sf-range-slider-handle-upper:where(:dir(ltr)) {
    right: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-handle-lower,[dir="rtl"]
  .sf-range-slider .sf-range-slider-handle-upper {
    left: auto;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-handle-lower,[dir="rtl"]
  .sf-range-slider .sf-range-slider-handle-upper {
    left: auto;
    }
  }
  .sf-range-slider .sf-range-slider-handle-lower:where(:dir(rtl)),
  .sf-range-slider .sf-range-slider-handle-upper:where(:dir(rtl)) {
    left: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-handle-lower,html:not([dir="rtl"])
  .sf-range-slider .sf-range-slider-handle-upper {
    left: calc(var(--sf-ui-1\/3--control-height) / -2);
    left: calc(var(--sf-thumb-handle--width, var(--sf-ui-1\/3--control-height)) / -2);
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-handle-lower,html:not([dir="rtl"])
  .sf-range-slider .sf-range-slider-handle-upper {
    left: calc(var(--sf-ui-1\/3--control-height) / -2);
    left: calc(var(--sf-thumb-handle--width, var(--sf-ui-1\/3--control-height)) / -2);
    }
  }
  .sf-range-slider .sf-range-slider-handle-lower:where(:dir(ltr)),
  .sf-range-slider .sf-range-slider-handle-upper:where(:dir(ltr)) {
    left: calc(var(--sf-ui-1\/3--control-height) / -2);
    left: calc(var(--sf-thumb-handle--width, var(--sf-ui-1\/3--control-height)) / -2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-handle-lower,[dir="rtl"]
  .sf-range-slider .sf-range-slider-handle-upper {
    right: calc(var(--sf-ui-1\/3--control-height) / -2);
    right: calc(var(--sf-thumb-handle--width, var(--sf-ui-1\/3--control-height)) / -2);
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-handle-lower,[dir="rtl"]
  .sf-range-slider .sf-range-slider-handle-upper {
    right: calc(var(--sf-ui-1\/3--control-height) / -2);
    right: calc(var(--sf-thumb-handle--width, var(--sf-ui-1\/3--control-height)) / -2);
    }
  }
  .sf-range-slider .sf-range-slider-handle-lower:where(:dir(rtl)),
  .sf-range-slider .sf-range-slider-handle-upper:where(:dir(rtl)) {
    right: calc(var(--sf-ui-1\/3--control-height) / -2);
    right: calc(var(--sf-thumb-handle--width, var(--sf-ui-1\/3--control-height)) / -2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-handle-lower,html:not([dir="rtl"])
  .sf-range-slider .sf-range-slider-handle-upper {
    left: calc(var(--sf-ui-1\/3--control-height) / -2);
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-handle-lower,html:not([dir="rtl"])
  .sf-range-slider .sf-range-slider-handle-upper {
    left: calc(var(--sf-ui-1\/3--control-height) / -2);
    }
  }
  .sf-range-slider .sf-range-slider-handle-lower:where(:dir(ltr)),
  .sf-range-slider .sf-range-slider-handle-upper:where(:dir(ltr)) {
    left: calc(var(--sf-ui-1\/3--control-height) / -2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-handle-lower,[dir="rtl"]
  .sf-range-slider .sf-range-slider-handle-upper {
    right: calc(var(--sf-ui-1\/3--control-height) / -2);
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-handle-lower,[dir="rtl"]
  .sf-range-slider .sf-range-slider-handle-upper {
    right: calc(var(--sf-ui-1\/3--control-height) / -2);
    }
  }
  .sf-range-slider .sf-range-slider-handle-lower:where(:dir(rtl)),
  .sf-range-slider .sf-range-slider-handle-upper:where(:dir(rtl)) {
    right: calc(var(--sf-ui-1\/3--control-height) / -2);
  }
  .sf-range-slider .sf-range-slider-handle-lower,
  .sf-range-slider .sf-range-slider-handle-upper {
    inset-inline-end: auto;
    inset-inline-start: calc(var(--sf-ui-1\/3--control-height) / -2);
    inset-inline-start: calc(var(--sf-thumb-handle--width, var(--sf-ui-1\/3--control-height)) / -2);
  }
  .sf-range-slider .sf-range-slider-visual {
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .sf-range-slider .sf-thumb--label-tooltip {
    position: relative;
  }
  .sf-range-slider .sf-thumb--label-text {
    position: relative;
  }
  .sf-range-slider .sf-thumb--label-tooltip .sf-tooltip,
  .sf-range-slider .sf-thumb--label-text .sf-thumb-text {
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    white-space: nowrap;
  }
  .sf-range-slider .sf-thumb--position-top.sf-thumb--label-tooltip .sf-tooltip,
  .sf-range-slider .sf-thumb--position-top.sf-thumb--label-text .sf-thumb-text {
    bottom: calc(100% + var(--sf-space-1\/4));
  }
  .sf-range-slider .sf-thumb--position-bottom.sf-thumb--label-tooltip .sf-tooltip,
  .sf-range-slider .sf-thumb--position-bottom.sf-thumb--label-text .sf-thumb-text {
    top: calc(100% + var(--sf-space-1\/4));
  }
  .sf-range-slider .sf-range-slider-labels {
    position: relative;
    width: 100%;
    inline-size: 100%;
    min-height: var(--sf-text-small--height);
    min-block-size: var(--sf-text-small--height);
    gap: var(--sf-space-1\/4);
  }
  .sf-range-slider .sf-range-slider-labels--top {
    margin-bottom: var(--sf-space-1\/4);
    -webkit-margin-after: var(--sf-space-1\/4);
            margin-block-end: var(--sf-space-1\/4);
  }
  .sf-range-slider .sf-range-slider-labels--bottom {
    margin-top: var(--sf-space-1\/4);
    -webkit-margin-before: var(--sf-space-1\/4);
            margin-block-start: var(--sf-space-1\/4);
  }
  .sf-range-slider .sf-range-slider-labels > .sf-tooltip,
  .sf-range-slider .sf-range-slider-labels > .sf-thumb-text {
    position: absolute;
    top: 0;
    -webkit-transform: none;
            transform: none;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    inline-size: -webkit-max-content;
    inline-size: -moz-max-content;
    inline-size: max-content;
    max-width: 100%;
    max-inline-size: 100%;
    white-space: normal;
    word-wrap: anywhere;
    text-align: center;
  }
  .sf-range-slider.disabled .sf-range-slider-handle.sf-thumb,
  .sf-range-slider[disabled] .sf-range-slider-handle.sf-thumb,
  .sf-range-slider.disabled .sf-range-slider-handle,
  .sf-range-slider[disabled] .sf-range-slider-handle {
    cursor: default;
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/4) justify-content/center (.justify-center) align-items/center (.items-center) */
  .sf-thumb {
    background-color: transparent;
    background-color: var(--sf-thumb--background-color, transparent);
    gap: var(--sf-space-1\/4);
    gap: var(--sf-thumb--gap, var(--sf-space-1\/4));
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-thumb .sf-thumb-handle {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-thumb-handle--border-end-end-radius, var(--sf-radius-circle));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-thumb .sf-thumb-handle {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-thumb-handle--border-end-end-radius, var(--sf-radius-circle));
    }
  }
  .sf-thumb .sf-thumb-handle:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-thumb-handle--border-end-end-radius, var(--sf-radius-circle));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-thumb .sf-thumb-handle {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-thumb-handle--border-end-end-radius, var(--sf-radius-circle));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-thumb .sf-thumb-handle {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-thumb-handle--border-end-end-radius, var(--sf-radius-circle));
    }
  }
  .sf-thumb .sf-thumb-handle:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-thumb-handle--border-end-end-radius, var(--sf-radius-circle));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-thumb .sf-thumb-handle {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-thumb-handle--border-end-start-radius, var(--sf-radius-circle));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-thumb .sf-thumb-handle {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-thumb-handle--border-end-start-radius, var(--sf-radius-circle));
    }
  }
  .sf-thumb .sf-thumb-handle:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-thumb-handle--border-end-start-radius, var(--sf-radius-circle));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-thumb .sf-thumb-handle {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-thumb-handle--border-end-start-radius, var(--sf-radius-circle));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-thumb .sf-thumb-handle {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-thumb-handle--border-end-start-radius, var(--sf-radius-circle));
    }
  }
  .sf-thumb .sf-thumb-handle:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-thumb-handle--border-end-start-radius, var(--sf-radius-circle));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-thumb .sf-thumb-handle {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-thumb-handle--border-start-end-radius, var(--sf-radius-circle));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-thumb .sf-thumb-handle {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-thumb-handle--border-start-end-radius, var(--sf-radius-circle));
    }
  }
  .sf-thumb .sf-thumb-handle:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-thumb-handle--border-start-end-radius, var(--sf-radius-circle));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-thumb .sf-thumb-handle {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-thumb-handle--border-start-end-radius, var(--sf-radius-circle));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-thumb .sf-thumb-handle {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-thumb-handle--border-start-end-radius, var(--sf-radius-circle));
    }
  }
  .sf-thumb .sf-thumb-handle:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-thumb-handle--border-start-end-radius, var(--sf-radius-circle));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-thumb .sf-thumb-handle {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-thumb-handle--border-start-start-radius, var(--sf-radius-circle));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-thumb .sf-thumb-handle {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-thumb-handle--border-start-start-radius, var(--sf-radius-circle));
    }
  }
  .sf-thumb .sf-thumb-handle:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-thumb-handle--border-start-start-radius, var(--sf-radius-circle));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-thumb .sf-thumb-handle {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-thumb-handle--border-start-start-radius, var(--sf-radius-circle));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-thumb .sf-thumb-handle {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-thumb-handle--border-start-start-radius, var(--sf-radius-circle));
    }
  }
  .sf-thumb .sf-thumb-handle:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-thumb-handle--border-start-start-radius, var(--sf-radius-circle));
  }
  .sf-thumb .sf-thumb-handle {
    background-color: var(--sf-primary);
    background-color: var(--sf-thumb-handle--background-color, var(--sf-primary));
    border-end-end-radius: var(--sf-radius-circle);
    border-end-end-radius: var(--sf-thumb-handle--border-end-end-radius, var(--sf-radius-circle));
    border-end-start-radius: var(--sf-radius-circle);
    border-end-start-radius: var(--sf-thumb-handle--border-end-start-radius, var(--sf-radius-circle));
    border-start-end-radius: var(--sf-radius-circle);
    border-start-end-radius: var(--sf-thumb-handle--border-start-end-radius, var(--sf-radius-circle));
    border-start-start-radius: var(--sf-radius-circle);
    border-start-start-radius: var(--sf-thumb-handle--border-start-start-radius, var(--sf-radius-circle));
    box-shadow: var(--sf-thumb-handle--box-shadow);
    height: var(--sf-ui-1\/3--control-height);
    height: var(--sf-thumb-handle--height, var(--sf-ui-1\/3--control-height));
    transition-duration: var(--sf-duration-fast);
    transition-property: background-color, box-shadow;
    transition-timing-function: var(--sf-animation);
    width: var(--sf-ui-1\/3--control-height);
    width: var(--sf-thumb-handle--width, var(--sf-ui-1\/3--control-height));
  }
  .sf-thumb .sf-thumb-inner {
    background-color: var(--sf-surface-0);
    background-color: var(--sf-thumb-inner--background-color, var(--sf-surface-0));
    border-radius: var(--sf-radius-circle);
    border-radius: var(--sf-thumb-inner--border-radius, var(--sf-radius-circle));
    height: 50%;
    height: var(--sf-thumb-inner--height, 50%);
    transition-duration: var(--sf-duration-fast);
    transition-property: background-color, height, width;
    transition-timing-function: var(--sf-animation);
    width: 50%;
    width: var(--sf-thumb-inner--width, 50%);
  }
  .sf-thumb .sf-thumb-text {
    color: var(--sf-on-surface);
    color: var(--sf-thumb-text--color, var(--sf-on-surface));
    font-family: var(--sf-text--family);
    font-family: var(--sf-thumb-text--font-family, var(--sf-text--family));
    font-size: var(--sf-text-small--size);
    font-size: var(--sf-thumb-text--font-size, var(--sf-text-small--size));
    font-weight: var(--sf-font-weight-regular);
    font-weight: var(--sf-thumb-text--font-weight, var(--sf-font-weight-regular));
    line-height: var(--sf-text-small--height);
    line-height: var(--sf-thumb-text--line-height, var(--sf-text-small--height));
  }
  .sf-thumb .sf-tooltip-content {
    box-shadow: var(--sf-tooltip-content--box-shadow);
  }
  .sf-thumb .sf-tooltip-text {
    font-weight: var(--sf-tooltip-text--font-weight);
  }
  .sf-thumb.sf-thumb--label-tooltip .sf-tooltip-content {
    --sf-tooltip-content--box-shadow: var(--sf-ui-shadow-1);
  }
  .sf-thumb.sf-thumb--label-tooltip .sf-tooltip-text {
    --sf-tooltip-text--font-weight: var(--sf-font-weight-regular);
  }
  .sf-thumb:not(:disabled):not(.disabled).focus-visible .sf-thumb-handle,
  .sf-range-slider:not([disabled]):not(.disabled) .sf-range-slider-handle.focus-visible .sf-thumb-handle {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-thumb:not(:disabled):not(.disabled):focus-visible .sf-thumb-handle,
  .sf-range-slider:not([disabled]):not(.disabled) .sf-range-slider-handle:focus-visible .sf-thumb-handle {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  @media (forced-colors: active) {
    .sf-range-slider .sf-thumb-handle {
      border: var(--sf-focus-outline-width) solid ButtonText;
    }
    .sf-range-slider:not([disabled]):not(.disabled) .sf-range-slider-handle.focus-visible .sf-thumb-handle {
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: var(--sf-focus-outline-width);
    }
    .sf-range-slider:not([disabled]):not(.disabled) .sf-range-slider-handle:focus-visible .sf-thumb-handle {
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: var(--sf-focus-outline-width);
    }
  }
  .sf-thumb:not(:disabled):not([disabled]):not(.disabled):not([disabled] *):not(.disabled *):hover .sf-thumb-handle {
    background-color: var(--sf-primary-hover);
    background-color: var(--sf-thumb-handle--hover-background-color, var(--sf-primary-hover));
  }
  .sf-thumb:not(:disabled):not([disabled]):not(.disabled):not([disabled] *):not(.disabled *):hover .sf-thumb-inner {
    height: 75%;
    height: var(--sf-thumb-inner--height, 75%);
    width: 75%;
    width: var(--sf-thumb-inner--width, 75%);
  }
  .sf-range-slider[disabled] .sf-thumb-handle {
    background-color: var(--sf-disable);
  }
  .sf-range-slider.disabled .sf-thumb-handle {
    background-color: var(--sf-disable);
  }
  .sf-range-slider[disabled] .sf-thumb-inner {
    background-color: var(--sf-on-disable);
  }
  .sf-range-slider.disabled .sf-thumb-inner {
    background-color: var(--sf-on-disable);
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-range-slider .sf-thumb-handle,
    .sf-range-slider .sf-thumb-inner {
      transition-duration: 0s;
    }
  }
}
@layer sf.components {
  /* utility-hint: display/block */
  .sf-range-slider {
    background-color: transparent;
    background-color: var(--sf-range-slider--background-color, transparent);
  }
  /* utility-hint: display/block */
  .sf-range-slider .sf-range-slider-progress {
    background-color: transparent;
    background-color: var(--sf-range-slider-progress--background-color, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-progress-line {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-progress-line--border-end-end-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-progress-line {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-progress-line--border-end-end-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-progress-line:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-progress-line--border-end-end-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-progress-line {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-progress-line--border-end-end-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-progress-line {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-progress-line--border-end-end-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-progress-line:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-progress-line--border-end-end-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-progress-line {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-progress-line--border-end-start-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-progress-line {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-progress-line--border-end-start-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-progress-line:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-progress-line--border-end-start-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-progress-line {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-progress-line--border-end-start-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-progress-line {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-progress-line--border-end-start-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-progress-line:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-progress-line--border-end-start-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-progress-line {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-progress-line--border-start-end-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-progress-line {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-progress-line--border-start-end-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-progress-line:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-progress-line--border-start-end-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-progress-line {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-progress-line--border-start-end-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-progress-line {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-progress-line--border-start-end-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-progress-line:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-progress-line--border-start-end-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-progress-line {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-progress-line--border-start-start-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-progress-line {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-progress-line--border-start-start-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-progress-line:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-progress-line--border-start-start-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-progress-line {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-progress-line--border-start-start-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-progress-line {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-progress-line--border-start-start-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-progress-line:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-progress-line--border-start-start-radius, var(--sf-radius--ui));
  }
  .sf-range-slider .sf-range-slider-progress-line {
    background-color: var(--sf-primary);
    background-color: var(--sf-range-slider-progress-line--background-color, var(--sf-primary));
    border-end-end-radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-range-slider-progress-line--border-end-end-radius, var(--sf-radius--ui));
    border-end-start-radius: var(--sf-radius--ui);
    border-end-start-radius: var(--sf-range-slider-progress-line--border-end-start-radius, var(--sf-radius--ui));
    border-start-end-radius: var(--sf-radius--ui);
    border-start-end-radius: var(--sf-range-slider-progress-line--border-start-end-radius, var(--sf-radius--ui));
    border-start-start-radius: var(--sf-radius--ui);
    border-start-start-radius: var(--sf-range-slider-progress-line--border-start-start-radius, var(--sf-radius--ui));
    height: var(--sf-a4);
    height: var(--sf-range-slider-progress-line--height, var(--sf-range-slider-track--height, var(--sf-a4)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-track {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-track--border-end-end-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-track {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-track--border-end-end-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-track:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-track--border-end-end-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-track {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-track--border-end-end-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-track {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-track--border-end-end-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-track:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-track--border-end-end-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-track {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-track--border-end-start-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-track {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-track--border-end-start-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-track:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-range-slider-track--border-end-start-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-track {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-track--border-end-start-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-track {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-track--border-end-start-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-track:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-range-slider-track--border-end-start-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-track {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-track--border-start-end-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-track {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-track--border-start-end-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-track:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-track--border-start-end-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-track {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-track--border-start-end-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-track {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-track--border-start-end-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-track:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-track--border-start-end-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-track {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-track--border-start-start-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-range-slider .sf-range-slider-track {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-track--border-start-start-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-track:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-range-slider-track--border-start-start-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-range-slider .sf-range-slider-track {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-track--border-start-start-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-range-slider .sf-range-slider-track {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-track--border-start-start-radius, var(--sf-radius--ui));
    }
  }
  .sf-range-slider .sf-range-slider-track:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-range-slider-track--border-start-start-radius, var(--sf-radius--ui));
  }
  .sf-range-slider .sf-range-slider-track {
    background-color: var(--sf-surface-container);
    background-color: var(--sf-range-slider-track--background-color, var(--sf-surface-container));
    border-end-end-radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-range-slider-track--border-end-end-radius, var(--sf-radius--ui));
    border-end-start-radius: var(--sf-radius--ui);
    border-end-start-radius: var(--sf-range-slider-track--border-end-start-radius, var(--sf-radius--ui));
    border-start-end-radius: var(--sf-radius--ui);
    border-start-end-radius: var(--sf-range-slider-track--border-start-end-radius, var(--sf-radius--ui));
    border-start-start-radius: var(--sf-radius--ui);
    border-start-start-radius: var(--sf-range-slider-track--border-start-start-radius, var(--sf-radius--ui));
    box-shadow: var(--sf-ui-shadow-2);
    box-shadow: var(--sf-range-slider-track--box-shadow, var(--sf-ui-shadow-2));
    height: var(--sf-a4);
    height: var(--sf-range-slider-track--height, var(--sf-a4));
  }
  .sf-range-slider[disabled] .sf-range-slider-progress-line {
    background-color: var(--sf-disable);
  }
  .sf-range-slider.disabled .sf-range-slider-progress-line {
    background-color: var(--sf-disable);
  }
}