.rc-slider {
  @apply relative h-[14px] w-full py-1;

  &-rail {
    @apply absolute top-[6px] h-[1px] w-full cursor-grab rounded-full;

    background: #424D57;
  }

  &-track,
  &-tracks {
    @apply absolute h-1 cursor-grab rounded-full bg-violet-medium;
  }

  &-handle {
    @apply absolute top-0 z-10 h-4 w-4 cursor-grab select-none rounded-full border-[1px] border-violet-medium bg-black transition-shadow;
    @apply flex items-center justify-center;

    &:hover,
    &-dragging,
    &-click-focused:focus,
    &:focus-visible,
    &:active {
      @apply ring-8 ring-red-medium/20;
    }
  }

  &-mark {
    @apply absolute left-0 top-4 w-full select-none text-sm;
  }

  &-mark-text {
    @apply absolute inline-block cursor-pointer text-center text-carbon-500;

    &-active {
      @apply text-white;
    }
  }
}