@layer components {
  .rs-range {
    --rs-range-track: var(--rs-color-background-neutral);
    --rs-range-fill: var(--rs-color-background-primary);
    --rs-range-thumb: var(--rs-color-background-primary);
    --rs-range-size: var(--rs-unit-x4);
    display: grid;
    gap: var(--rs-unit-x2);
    color: var(--rs-color-foreground-neutral);
  }

  .rs-range[data-value="68"] {
    --rs-value-range: 68%;
  }

  .rs-range > input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 100%;
    block-size: var(--rs-range-size);
    background: transparent;
    cursor: pointer;
    accent-color: var(--rs-range-fill);
  }

  .rs-range > input[type="range"]:focus-visible {
    outline: 0;
  }

  .rs-range > input[type="range"]::-webkit-slider-runnable-track {
    block-size: var(--rs-unit-x1);
    border-radius: var(--rs-radius-small);
    background: linear-gradient(
      to right,
      var(--rs-range-fill) 0 var(--rs-value-range, 50%),
      var(--rs-range-track) var(--rs-value-range, 50%) 100%
    );
  }

  .rs-range > input[type="range"]::-moz-range-track {
    block-size: var(--rs-unit-x1);
    border-radius: var(--rs-radius-small);
    background: var(--rs-range-track);
  }

  .rs-range > input[type="range"]::-moz-range-progress {
    block-size: var(--rs-unit-x1);
    border-radius: var(--rs-radius-small);
    background: var(--rs-range-fill);
  }

  .rs-range > input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    inline-size: var(--rs-range-size);
    block-size: var(--rs-range-size);
    border-radius: var(--rs-radius-circular);
    background: var(--rs-range-thumb);
    box-shadow: 0 0 0 2px var(--rs-color-background-elevation-base);
    transform: translateY(calc((var(--rs-unit-x1) - var(--rs-range-size)) / 2));
  }

  .rs-range > input[type="range"]::-moz-range-thumb {
    inline-size: var(--rs-range-size);
    block-size: var(--rs-range-size);
    border: 0;
    border-radius: var(--rs-radius-circular);
    background: var(--rs-range-thumb);
    box-shadow: 0 0 0 2px var(--rs-color-background-elevation-base);
  }

  .rs-range > input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--rs-shadow-focus);
  }

  .rs-range > input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: var(--rs-shadow-focus);
  }

  .rs-range:has(input:disabled) {
    --rs-range-track: var(--rs-color-background-disabled);
    --rs-range-fill: var(--rs-color-foreground-disabled);
    --rs-range-thumb: var(--rs-color-foreground-disabled);
    color: var(--rs-color-foreground-disabled);
    cursor: not-allowed;
  }
}