/* Horizontal */
.slider {
  @apply relative w-full;
  touch-action: none;
}

.slider-horizontal {
  @apply flex flex-col justify-center;
  padding-block: 10px;
}

.slider-vertical {
  @apply inline-flex flex-row justify-center;
  padding-inline: 10px;
  height: 200px;
}

.slider-disabled {
  @apply opacity-50 pointer-events-none;
}

/* Track */
.slider-track {
  @apply relative bg-gray-200 dark:bg-gray-700 rounded-full cursor-pointer;
}

.slider-horizontal .slider-track {
  @apply w-full;
}

.slider-vertical .slider-track {
  @apply h-full;
}

/* Fill */
.slider-fill {
  @apply absolute bg-indigo-500 dark:bg-indigo-400 rounded-full;
  top: 0;
  bottom: 0;
}

.slider-vertical .slider-fill {
  left: 0;
  right: 0;
}

/* Handle */
.slider-handle {
  @apply absolute rounded-full bg-white border-2 border-indigo-500
         shadow-md cursor-grab z-10 outline-hidden
         focus:ring-2 focus:ring-offset-1 transition-shadow duration-100
         hover:shadow-lg;
  top: 50%;
  transform: translateY(-50%);
}

.slider-vertical .slider-handle {
  top: auto;
  left: 50%;
  transform: translateX(-50%);
}

.slider-handle:active {
  @apply cursor-grabbing shadow-lg;
}

.slider-handle-disabled {
  @apply cursor-not-allowed;
}

/* Tooltip */
.slider-tooltip {
  @apply absolute -top-8 left-1/2 -translate-x-1/2
         px-1.5 py-0.5 text-xs font-medium
         bg-gray-800 dark:bg-gray-200
         text-white dark:text-gray-900
         rounded-sm whitespace-nowrap pointer-events-none z-20;
}

.slider-tooltip::after {
  content: '';
  @apply absolute left-1/2 -translate-x-1/2 -bottom-1;
  border: 4px solid transparent;
  border-top-color: var(--color-gray-800);
}

.dark .slider-tooltip::after {
  border-top-color: var(--color-gray-200);
}

/* Marks */
.slider-marks {
  @apply relative w-full mt-2;
  height: 20px;
}

.slider-marks-vertical {
  @apply h-full ml-2 mt-0;
  width: 20px;
}

.slider-mark-wrapper {
  @apply absolute flex flex-col items-center -translate-x-1/2;
}

.slider-marks-vertical .slider-mark-wrapper {
  @apply flex-row translate-x-0 -translate-y-1/2;
}

.slider-mark-dot {
  @apply w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600;
}

.slider-mark-dot-active {
  @apply bg-indigo-400 dark:bg-indigo-500;
}

.slider-mark-label {
  @apply text-xs text-gray-500 dark:text-gray-400 mt-1 whitespace-nowrap;
}

.slider-marks-vertical .slider-mark-label {
  @apply mt-0 ml-1;
}