.slider {
  @apply relative flex w-full touch-none select-none items-center;

  &-track {
    @apply relative h-1.5 w-full grow overflow-hidden rounded-full bg-gray-200;
    [data-disabled] {
      @apply cursor-not-allowed opacity-50;
    }
  }

  &-range {
    @apply absolute h-full bg-blue-600;
  }

  &-thumb {
    @apply bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border border-blue-600/50 shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50;
  }
}