/**
 * TWA standardized range slider
 * Design: circular thumb (white inner, blue ring), subtle shadow, slight hover scale
 * Used in: Draw properties, Animation bar zoom, Weather layer opacity, Text alpha, etc.
 */

.twa-slider {
  --twa-slider-accent: var(--accent, #1A6FD4);
  --twa-slider-track: rgba(0, 0, 0, 0.08);
  --twa-slider-track-h: 4px;
  --twa-slider-thumb-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--twa-slider-track-h);
  border-radius: 999px;
  background: var(--twa-slider-track);
  outline: none;
  cursor: pointer;
  accent-color: var(--twa-slider-accent);
}

.twa-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--twa-slider-track-h);
  border-radius: 999px;
  background: var(--twa-slider-track);
}

.twa-slider::-moz-range-track {
  width: 100%;
  height: var(--twa-slider-track-h);
  border-radius: 999px;
  background: var(--twa-slider-track);
}

.twa-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--twa-slider-thumb-size);
  height: var(--twa-slider-thumb-size);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--twa-slider-accent);
  box-shadow: 0 1px 3px rgba(26, 111, 212, 0.25);
  cursor: pointer;
  margin-top: calc((var(--twa-slider-track-h) - var(--twa-slider-thumb-size)) / 2);
  transition: transform 160ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 160ms;
}

.twa-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(26, 111, 212, 0.35);
}

.twa-slider::-moz-range-thumb {
  width: var(--twa-slider-thumb-size);
  height: var(--twa-slider-thumb-size);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--twa-slider-accent);
  box-shadow: 0 1px 3px rgba(26, 111, 212, 0.25);
  cursor: pointer;
  transition: transform 160ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 160ms;
}

.twa-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(26, 111, 212, 0.35);
}

/* Compact zoom slider in header */
.ae-zoom-slider-header.twa-slider {
  width: 72px;
  min-width: 72px;
}