/*
 * main.css drives the sun/moon swap off the element id:
 *
 *   .dark-light-mode #switch:checked + .icon--moon { ... }
 *   .dark-light-mode #switch:checked ~ .icon--sun  { ... }
 *
 * That only works while exactly one switcher exists on the page. Now that one
 * also lives in the sidebar, each instance needs its own id, so the same rules
 * are restated here against the `.input` class the component already carries.
 * Identical declarations -- this changes the selector, not the animation.
 */

/*
 * The sun (shown while dark mode is on) carries the site's primary colour.
 * Set on the wrapper rather than the <svg>: the icon paints with
 * `fill="currentColor"`, so `color` here flows through without CSS having to
 * out-specify a presentation attribute. The moon keeps inheriting the header's
 * text colour.
 */
.dark-light-mode .icon--sun {
  color: var(--at-theme-primary, #f0460e);
}

.dark-light-mode .input:checked + .icon--moon {
  transform: rotate(360deg) scale(0);
}

.dark-light-mode .input:checked ~ .icon--sun {
  transition-delay: 200ms;
  transform: scale(1) rotate(360deg);
}