/* Slider Atom */
.slider-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.slider-input {
  flex: 1;
  height: var(--space-1_5);
  background: var(--bg-panel);              /* Panel color for track */
  border-radius: var(--border-radius-full);
  outline: none;
  appearance: none;
  cursor: pointer;
}

.slider-input::-webkit-slider-thumb {
  appearance: none;
  width: var(--space-5);
  height: var(--space-5);
  background: var(--color-primary);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.slider-input::-moz-range-thumb {
  width: var(--space-5);
  height: var(--space-5);
  background: var(--color-primary);
  border: none;
  border-radius: var(--border-radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.slider-input:focus-visible {
  outline: var(--border-width-2) solid var(--border-focus);
  outline-offset: var(--border-width-2);
}

.slider-value {
  min-width: var(--space-10);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.slider-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.slider-disabled .slider-input {
  cursor: not-allowed;
}