/* css/theme-switch.css — the theme control, wherever it is shown.

   Loaded by the shell and by every lesson document, because the two are
   separate documents: a lesson runs inside an <iframe> and cannot see the
   shell's stylesheets. One file rather than a copy in each, so the switch
   cannot drift between the list and the page you read.

   Two skies, one object. Light is the clay track with the sun run out to the
   far side and a cloud drifting in under it. Dark is a slate track with the
   same disc pulled back to the near side, eaten into a crescent, and three
   stars fading up behind it.

   The disc is the trick and it is worth naming: it has no background of its
   own. A single inset box-shadow is both bodies — spread out to 15px it floods
   the circle solid yellow and that is the sun; spread 0 with an offset it
   leaves a white sliver against nothing and that is the crescent. So the sun
   does not cross-fade into a moon, it *becomes* one, on the same 300ms the
   track colour and the slide take.

   The track is laid out left-to-right regardless of the document, because
   every position here is physical: the disc parks against one wall of the
   switch and travels to the other, and which wall that is must not depend on
   the page being Arabic. */

.theme-switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 64px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-switch:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.theme-switch-track {
  position: absolute;
  inset: 0;
  direction: ltr;
  overflow: hidden;
  border-radius: 30px;
  background-color: var(--primary);
  transition: background-color var(--dur-state) linear;
}

[data-theme="dark"] .theme-switch-track {
  /* Not --bg-secondary: the slate is a fixed part of this drawing the way the
     yellow and the white are, and it has to stay a shade the crescent can be
     seen against on any surface the switch is ever put on. */
  background-color: #0d2537;
}

/* Sun, then moon. Bottom-left is where it lives; light runs it to the right. */
.theme-switch-disc {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  box-shadow: inset 15px -4px 0 15px #ffcf48;
  transform: translateX(1.8rem);
  /* The overshoot is what makes it read as a body swinging into place rather
     than a value being interpolated. */
  transition: transform var(--dur-state) cubic-bezier(0.81, -0.04, 0.38, 1.5),
              box-shadow var(--dur-state) cubic-bezier(0.81, -0.04, 0.38, 1.5);
}

[data-theme="dark"] .theme-switch-disc {
  transform: translateX(0);
  box-shadow: inset 8px -4px 0 0 #fff;
}

/* Three of them, at no particular grid — a constellation is not a pattern. */
.theme-switch-star {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--dur-state) linear;
}

.theme-switch-star-1 { left: 2.5rem;  top: 8px; }
.theme-switch-star-2 { left: 2.2rem;  top: 20px; }
.theme-switch-star-3 { left: 3rem;    top: 14px; }

[data-theme="dark"] .theme-switch-star {
  opacity: 1;
}

/* Hung off the bottom-left corner and clipped by the track, so only its crown
   shows — a cloud passing under the switch, not a cloud drawn inside it. */
.theme-switch-cloud {
  position: absolute;
  left: -12px;
  bottom: -20px;
  width: 3.5rem;
  opacity: 1;
  transition: opacity var(--dur-state) linear;
}

[data-theme="dark"] .theme-switch-cloud {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch-track,
  .theme-switch-disc,
  .theme-switch-star,
  .theme-switch-cloud {
    transition: none;
  }
}