@layer components {
  .singlestage-form input[type="range"],
  .singlestage-input[type="range"] {
    @apply appearance-none
    flex
    items-center
    outline-none
    p-0;
    --slider-value: 20%;

    &:hover,
    &:focus-visible {
      &::-webkit-slider-thumb {
        @apply ring-4;
      }
      &::-moz-range-thumb {
        @apply ring-4;
      }
      &::-ms-thumb {
        @apply ring-4;
      }
    }

    &::-webkit-slider-thumb {
      @apply -mt-1.25
      appearance-none
      bg-background
      block
      border
      border-primary
      ring-ring/50
      rounded-full
      shadow-sm
      shrink-0
      size-4;
    }
    &::-webkit-slider-runnable-track {
      @apply appearance-none
      h-1.5
      rounded-full
      w-full;
      background: linear-gradient(
        to right,
        var(--primary) var(--slider-value),
        var(--muted) var(--slider-value)
      );
    }
    &::-moz-range-thumb {
      @apply -mt-1.25
      appearance-none
      bg-background
      block
      border
      border-primary
      ring-ring/50
      rounded-full
      shadow-sm
      shrink-0
      size-4;
    }
    &::-moz-range-track {
      @apply appearance-none
      h-1.5
      rounded-full
      w-full;
      background: linear-gradient(
        to right,
        var(--primary) var(--slider-value),
        var(--muted) var(--slider-value)
      );
    }
    &::-ms-thumb {
      @apply -mt-1.25
      appearance-none
      bg-background
      block
      border
      border-primary
      ring-ring/50
      rounded-full
      shadow-sm
      shrink-0
      size-4;
    }
    &::-ms-track {
      @apply appearance-none
      h-1.5
      rounded-full
      w-full;
    }
    &::-ms-fill-lower {
      @apply bg-primary
      rounded-full;
    }
    &::-ms-fill-upper {
      @apply bg-muted rounded-full;
    }
  }
}
