/* Range input: [type=range] */

[type="range"] {
  appearance: none;
  inline-size: 100%;
  block-size: 1.25rem;
  background: none;

  &::-webkit-slider-runnable-track {
    inline-size: 100%;
    block-size: 0.375rem;
    border-radius: 1rem;
    background-color: var(--pico-range-border-color);
    transition:
      background-color var(--pico-transition),
      box-shadow var(--pico-transition);
  }

  &::-moz-range-track {
    inline-size: 100%;
    block-size: 0.375rem;
    border-radius: 1rem;
    background-color: var(--pico-range-border-color);
    transition:
      background-color var(--pico-transition),
      box-shadow var(--pico-transition);
  }

  /* Firefox fills the track up to the thumb. Chromium has no such part for appearance: none. */
  &::-moz-range-progress {
    block-size: 0.375rem;
    border-radius: 1rem;
    background-color: var(--pico-primary-background);
  }

  &::-webkit-slider-thumb {
    appearance: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: -0.4375rem;
    border: 2px solid var(--pico-range-thumb-border-color);
    border-radius: 50%;
    background-color: var(--pico-range-thumb-color);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.2);
    cursor: pointer;
    transition:
      background-color var(--pico-transition),
      transform var(--pico-transition);
  }

  &::-moz-range-thumb {
    appearance: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: -0.4375rem;
    border: 2px solid var(--pico-range-thumb-border-color);
    border-radius: 50%;
    background-color: var(--pico-range-thumb-color);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.2);
    cursor: pointer;
    transition:
      background-color var(--pico-transition),
      transform var(--pico-transition);
  }

  &:active,
  &:focus-within {
    --pico-range-border-color: var(--pico-range-active-border-color);
    --pico-range-thumb-color: var(--pico-range-thumb-active-color);
  }

  &:focus-visible::-webkit-slider-thumb {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: var(--pico-outline-width);
  }

  &:focus-visible::-moz-range-thumb {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: var(--pico-outline-width);
  }

  &:active::-webkit-slider-thumb {
    transform: scale(1.25);
  }

  &:active::-moz-range-thumb {
    transform: scale(1.25);
  }
}