/* Theme toggle switch: track, sun/moon glyphs, sliding thumb. */

.theme-toggle {
  position: relative;
  width: 68px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-toggle-track);
  cursor: pointer;
  /* Easing a theme change rather than cutting to it: an abrupt full-page
     brightness jump is one of the things reduced motion exists to avoid. */
  transition: background var(--response) var(--ease-enter);
}

.theme-toggle.is-pressed .toggle-thumb {
  /* The thumb narrows under the press, the way a physical switch gives. */
  transform: scaleX(0.88);
}

body.dark-mode .theme-toggle.is-pressed .toggle-thumb {
  transform: translateX(34px) scaleX(0.88);
}

/*
  Above the thumb, deliberately — the glyph on the active side reads *on* the
  thumb rather than being hidden behind it.
*/
.sun,
.moon {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  /* Colour is themed too, so it has to ease alongside the track and thumb —
     otherwise the glyphs snap while everything around them slides. */
  transition: opacity var(--response) var(--ease-enter),
    color var(--response) var(--ease-enter);
}

.sun {
  left: 9px;
  color: var(--color-toggle-sun);
  opacity: var(--toggle-sun-opacity);
}

.moon {
  right: 9px;
  color: var(--color-toggle-moon);
  opacity: var(--toggle-moon-opacity);
}

.toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle);
  background: var(--color-toggle-thumb);
  box-shadow: 0 3px 8px rgba(var(--color-black-rgb), 0.18);
  /* Critically damped: a click carries no momentum into the slide, so
     overshoot here would be decoration rather than physics. */
  transition: transform var(--response) var(--ease-enter),
    background var(--response) var(--ease-enter);
}