/* ==========================================================================
   Component: Slider
   .slider — sweep/range slider for trading parameters.
   ========================================================================== */

.slider {
  --slider-thumb-size: 16px;
  --slider-track-height: 4px;
  --slider-fill: var(--accent);
  --slider-track-bg: var(--bg-overlay);

  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--slider-thumb-size);
}

/* ---------------------------------------------------------------------------
   Native Range Input
   --------------------------------------------------------------------------- */
.slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--slider-track-height);
  background: var(--slider-track-bg);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
  margin: 0;
}

/* Webkit track */
.slider__input::-webkit-slider-runnable-track {
  height: var(--slider-track-height);
  background: var(--slider-track-bg);
  border-radius: var(--radius-full);
}

/* Firefox track */
.slider__input::-moz-range-track {
  height: var(--slider-track-height);
  background: var(--slider-track-bg);
  border-radius: var(--radius-full);
  border: none;
}

/* Webkit fill (progress) */
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--slider-fill);
  border: 2px solid var(--bg-base);
  border-radius: var(--radius-full);
  cursor: pointer;
  margin-top: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
}

.slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2);
}

.slider__input::-webkit-slider-thumb:active {
  transform: scale(1.05);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.15);
}

/* Firefox thumb */
.slider__input::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--slider-fill);
  border: 2px solid var(--bg-base);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.slider__input::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2);
}

/* Firefox progress fill */
.slider__input::-moz-range-progress {
  height: var(--slider-track-height);
  background: var(--slider-fill);
  border-radius: var(--radius-full);
}

/* Focus */
.slider__input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.slider__input:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Disabled */
.slider__input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.slider__input:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

.slider__input:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Slider with labels / value display
   --------------------------------------------------------------------------- */
.slider-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.slider-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slider-group__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.slider-group__value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: var(--weight-medium);
}

/* Tick marks */
.slider__ticks {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-1);
}

.slider__tick {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .slider__input::-webkit-slider-thumb {
    transition: none;
  }

  .slider__input::-moz-range-thumb {
    transition: none;
  }
}