/* Slider Component Styles */
.slider-input {
  @apply appearance-none w-full h-1 rounded-full bg-gray-200 outline-none transition-all select-none;
  background-image: linear-gradient(to right, hsl(var(--primary)) 0%, hsl(var(--primary)) var(--value, 0%), #e5e7eb var(--value, 0%));
  /* Allow vertical scrolling while preventing horizontal gestures */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Webkit (Chrome, Safari, Edge) */
.slider-input::-webkit-slider-thumb {
  @apply appearance-none w-4 h-4 bg-primary rounded-full cursor-pointer border-2 border-white shadow-md transition-all hover:scale-110;
}

/* Firefox */
.slider-input::-moz-range-thumb {
  @apply appearance-none w-4 h-4 bg-primary rounded-full cursor-pointer border-2 border-white shadow-md transition-all hover:scale-110;
}

/* Keep thumb size small on touch devices to minimize interference with scrolling */
@media (pointer: coarse) {
  .slider-input::-webkit-slider-thumb {
    @apply w-5 h-5;
    /* Add subtle shadow to indicate touch area */
    box-shadow: 0 0 0 15px rgba(59, 130, 246, 0.1);
  }
  
  .slider-input::-moz-range-thumb {
    @apply w-5 h-5;
    /* Add subtle shadow to indicate touch area */
    box-shadow: 0 0 0 15px rgba(59, 130, 246, 0.1);
  }
}

/* Focus state */
.slider-input:focus {
  @apply ring-2 ring-primary ring-offset-2;
}

/* Disabled state */
.slider-input:disabled {
  @apply opacity-50 cursor-not-allowed;
}

.slider-input:disabled::-webkit-slider-thumb {
  @apply cursor-not-allowed hover:scale-100;
}

.slider-input:disabled::-moz-range-thumb {
  @apply cursor-not-allowed hover:scale-100;
}