/* Slider component styles */

/* Slider container */
.slider {
  width: 100%;
  padding: var(--space-2) 0;
}

/* Slider label row */
.slider__label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Slider value display */
.slider__value {
  font-weight: var(--font-weight-medium);
}

/* Slider range input */
.slider__input {
  position: relative;
  width: 100%;
  height: 1rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: var(--space-1) 0;
}

/* Slider track */
.slider__input::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  background-color: var(--color-gray-200);
  border-radius: var(--border-radius-full);
}

.slider__input::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  background-color: var(--color-gray-200);
  border-radius: var(--border-radius-full);
}

/* Slider thumb */
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: var(--border-radius-full);
  background-color: var(--color-gray-800);
  border: 0;
  margin-top: -0.25rem;
  transition: background-color var(--transition-normal) var(--transition-ease);
}

.slider__input::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: var(--border-radius-full);
  background-color: var(--color-gray-800);
  border: 0;
  transition: background-color var(--transition-normal) var(--transition-ease);
}

/* Slider focus state */
.slider__input:focus {
  outline: none;
}

.slider__input:focus::-webkit-slider-thumb {
  background-color: var(--color-gray-900);
  box-shadow:
    0 0 0 2px var(--color-white),
    0 0 0 4px var(--color-gray-500);
}

.slider__input:focus::-moz-range-thumb {
  background-color: var(--color-gray-900);
  box-shadow:
    0 0 0 2px var(--color-white),
    0 0 0 4px var(--color-gray-500);
}

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

/* FIXME: This probably doesn't belong here */
/* Slider with label in dropdown context */
.dropdown .slider {
  padding: var(--space-3);
}

/* Mobile touch optimization */
@media (pointer: coarse) {
  /* Apply only on devices with coarse pointers (touch screens) */
  .slider__input {
    height: 2rem; /* Increased height for better touch area */
    touch-action: manipulation; /* Improve touch behavior */
    padding: 0.75rem 0; /* Extra padding for larger touch target */
  }

  .slider__input::-webkit-slider-thumb {
    width: 1.5rem; /* Larger thumb for touch */
    height: 1.5rem;
    margin-top: -0.5rem; /* Adjusted for larger thumb */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  }

  .slider__input::-moz-range-thumb {
    width: 1.5rem; /* Larger thumb for touch */
    height: 1.5rem;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  }
}