/* Range sliders: solid primary fill from min value up to the thumb (progress style). */

.profile-image-editor-range {
  --range-fill: 0%;
  --range-track-empty: rgb(229 231 235); /* gray-200 */
  width: 100%;
  height: 0.5rem;
  border-radius: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

:root[data-colour-scheme="dark"] .profile-image-editor-range {
  --range-track-empty: rgb(75 85 99); /* gray-600 */
}

/* Chromium / Safari: gradient simulates filled track */
.profile-image-editor-range::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(
    to right,
    var(--color-primary-600) 0%,
    var(--color-primary-600) var(--range-fill),
    var(--range-track-empty) var(--range-fill),
    var(--range-track-empty) 100%
  );
}

.profile-image-editor-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  border-radius: 9999px;
  background: white;
  border: 2px solid var(--color-primary-600);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}

:root[data-colour-scheme="dark"] .profile-image-editor-range::-webkit-slider-thumb {
  background: rgb(31 41 55); /* gray-800 */
  border-color: var(--color-primary-400);
}

/* Firefox: native progress track + thumb */
.profile-image-editor-range::-moz-range-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: var(--range-track-empty);
}

.profile-image-editor-range::-moz-range-progress {
  height: 0.5rem;
  border-radius: 0.5rem 0 0 0.5rem;
  background: var(--color-primary-600);
}

.profile-image-editor-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: white;
  border: 2px solid var(--color-primary-600);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}

:root[data-colour-scheme="dark"] .profile-image-editor-range::-moz-range-thumb {
  background: rgb(31 41 55);
  border-color: var(--color-primary-400);
}