/* Range Slider System */
.slider-group {
  margin-bottom: 1rem;
}

.slider-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.slider-values {
  font-family: monospace;
  color: var(--text-muted);
}

/* Single Value Slider */
.single-slider {
  position: relative;
  height: 24px;
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
}

.single-slider-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
}

.single-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 12px;
  pointer-events: none;
}

.single-slider-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 2;
  touch-action: none;
}

.single-slider-thumb:active {
  cursor: grabbing;
}

/* Dual Range Slider */
.dual-slider {
  position: relative;
  height: 24px;
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: visible;
  touch-action: none;
}

.dual-slider-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
}

.dual-slider-gradient {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.dual-slider-range {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  cursor: grab;
  border-radius: 12px;
}

.dual-slider-range:active {
  cursor: grabbing;
}

.dual-slider-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 2;
  touch-action: none;
}

.dual-slider-thumb:active {
  cursor: grabbing;
}

.dual-slider-thumb.from {
  z-index: 3;
}

.dual-slider-thumb.to {
  z-index: 3;
}

/* Slider Color Gradients - OKLCH */
.slider-lightness .dual-slider-gradient,
.slider-lightness .single-slider-track {
  background: linear-gradient(to right, #000, #fff);
}

.slider-chroma .dual-slider-gradient,
.slider-chroma .single-slider-track {
  background: linear-gradient(to right, #888, oklch(0.7 0.4 0));
}

.slider-hue .dual-slider-gradient,
.slider-hue .single-slider-track {
  background: linear-gradient(to right,
  oklch(0.7 0.15 0),
  oklch(0.7 0.15 60),
  oklch(0.7 0.15 120),
  oklch(0.7 0.15 180),
  oklch(0.7 0.15 240),
  oklch(0.7 0.15 300),
  oklch(0.7 0.15 360)
  );
}

/* Slider Color Gradients - RGB */
.slider-red .dual-slider-gradient,
.slider-red .single-slider-track {
  background: linear-gradient(to right, #000, #f00);
}

.slider-green .dual-slider-gradient,
.slider-green .single-slider-track {
  background: linear-gradient(to right, #000, #0f0);
}

.slider-blue .dual-slider-gradient,
.slider-blue .single-slider-track {
  background: linear-gradient(to right, #000, #00f);
}

/* Slider Color Gradients - HSL */
.slider-hsl-hue .dual-slider-gradient,
.slider-hsl-hue .single-slider-track {
  background: linear-gradient(to right,
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
  );
}

.slider-hsl-saturation .dual-slider-gradient,
.slider-hsl-saturation .single-slider-track {
  background: linear-gradient(to right, #808080, #ff0000);
}

.slider-hsl-lightness .dual-slider-gradient,
.slider-hsl-lightness .single-slider-track {
  background: linear-gradient(to right, #000, #808080, #fff);
}

.slider-saturation .dual-slider-gradient,
.slider-saturation .single-slider-track {
  background: linear-gradient(to right, #888, #f00);
}

/* Prevent text selection during drag */
.slider-dragging {
  user-select: none;
}