/* The site's one slide switch.
 *
 * Two pages use it and they are styled by different stylesheets -- the profile
 * page's collected control (styles-profile-page.css) and the dex control
 * panel's collection filter (styles-index.css) -- so the component lives here
 * rather than being written twice and drifting.
 *
 * A page sets ONE number, --track-h, and everything else is derived from it:
 * the width is a fixed pill ratio, the knob is the height minus its insets,
 * and the travel is translateX(--track-w - --track-h). Height is the number
 * that matters at the call sites, because both switches sit in a row of other
 * controls and are asked to match them; a hand-written width and offset would
 * need re-deriving at every breakpoint that changes it. Override --track-w
 * only to break the pill ratio deliberately.
 *
 * The tone is variables rather than a second rule set. There is exactly one
 * "engaged" rule for the track and one for the knob; a state that wants a
 * different colour re-declares --slide-toggle-on-* and reuses them. That is
 * what lets the filter be a THREE-state control (off / green collected / red
 * missing) without a third copy of the switch.
 */
.slide-toggle {
  --track-h: 1.15rem;
  --track-w: calc(var(--track-h) * 1.7);
  --knob-inset: calc(var(--track-h) * 0.115);
  --slide-toggle-border: rgba(128, 171, 203, 0.42);
  --slide-toggle-hover-border: rgba(255, 210, 141, 0.58);
  --slide-toggle-focus-ring: rgba(255, 214, 150, 0.9);
  --slide-toggle-on-border: rgba(92, 255, 132, 0.7);
  --slide-toggle-on-a: #069428;
  --slide-toggle-on-b: #007007;
  --slide-toggle-on-glow: rgba(0, 228, 56, 0.28);
  --slide-toggle-knob-on-a: #ffffff;
  --slide-toggle-knob-on-b: #d8ffe4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

.slide-toggle-track {
  position: relative;
  display: block;
  width: var(--track-w);
  height: var(--track-h);
  border-radius: 999px;
  border: 1px solid var(--slide-toggle-border);
  background: linear-gradient(180deg, rgba(14, 24, 39, 0.95), rgba(9, 16, 28, 0.98));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.slide-toggle-knob {
  position: absolute;
  top: var(--knob-inset);
  left: var(--knob-inset);
  width: calc(var(--track-h) - var(--knob-inset) * 2 - 2px);
  height: calc(var(--track-h) - var(--knob-inset) * 2 - 2px);
  border-radius: 50%;
  background: linear-gradient(180deg, #e8eef8, #b9c6d8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 180ms cubic-bezier(0.22, 0.8, 0.28, 1), background-color 160ms ease;
}

/* Any engaged state, whatever its tone. */
.slide-toggle[data-toggle-state="on"] .slide-toggle-track,
.slide-toggle[data-toggle-state="alt"] .slide-toggle-track {
  border-color: var(--slide-toggle-on-border);
  background: linear-gradient(180deg, var(--slide-toggle-on-a), var(--slide-toggle-on-b));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 10px var(--slide-toggle-on-glow);
}

.slide-toggle[data-toggle-state="on"] .slide-toggle-knob,
.slide-toggle[data-toggle-state="alt"] .slide-toggle-knob {
  background: linear-gradient(180deg, var(--slide-toggle-knob-on-a), var(--slide-toggle-knob-on-b));
  /* The travel is the track minus the knob, so it stays right when the switch
     is resized at a breakpoint. */
  transform: translateX(calc(var(--track-w) - var(--track-h)));
}

.slide-toggle:focus-visible {
  outline: none;
}

.slide-toggle:focus-visible .slide-toggle-track {
  outline: 2px solid var(--slide-toggle-focus-ring);
  outline-offset: 2px;
}

.slide-toggle:hover .slide-toggle-track {
  border-color: var(--slide-toggle-hover-border);
}

@media (prefers-reduced-motion: reduce) {
  .slide-toggle-knob {
    transition: none;
  }
}