.range {
  &-xs {
    @apply h-4;
    &::-webkit-slider-runnable-track {
      @apply h-1;
    }
    &::-moz-range-track {
      @apply h-1;
    }
    &::-webkit-slider-thumb {
      @apply h-4 w-4;
      --filler-offset: 0.4rem;
    }
    &::-moz-range-thumb {
      @apply h-4 w-4;
      --filler-offset: 0.4rem;
    }
  }
  &-sm {
    @apply h-5;
    &::-webkit-slider-runnable-track {
      @apply h-1;
    }
    &::-moz-range-track {
      @apply h-1;
    }
    &::-webkit-slider-thumb {
      @apply h-5 w-5;
      --filler-offset: 0.5rem;
    }
    &::-moz-range-thumb {
      @apply h-5 w-5;
      --filler-offset: 0.5rem;
    }
  }
  &-md {
    @apply h-6;
    &::-webkit-slider-runnable-track {
      @apply h-2;
    }
    &::-moz-range-track {
      @apply h-2;
    }
    &::-webkit-slider-thumb {
      @apply h-6 w-6;
      --filler-offset: 0.6rem;
    }
    &::-moz-range-thumb {
      @apply h-6 w-6;
      --filler-offset: 0.6rem;
    }
  }
  &-lg {
    @apply h-8;
    &::-webkit-slider-runnable-track {
      @apply h-4;
    }
    &::-moz-range-track {
      @apply h-4;
    }
    &::-webkit-slider-thumb {
      @apply h-8 w-8;
      --filler-offset: 1rem;
    }
    &::-moz-range-thumb {
      @apply h-8 w-8;
      --filler-offset: 1rem;
    }
  }
}
