/* The day and night switch in the site menu (shared/theme.js draws it and keeps the choice). A small track
   with the lime knob: a sun by day on the left, a moon at night on the right, with three stars coming out.
   Uses the tokens both shared/tokens.css and the search page's tokens.css have. */
.theme-switch {
  position: relative; flex: none; width: 52px; height: 28px; padding: 0; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel-2); cursor: pointer; overflow: hidden; transition: background-color .4s, border-color .4s;
}
.theme-switch:hover { border-color: var(--muted); }
.theme-switch:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ts-knob {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .5s cubic-bezier(.5, -.4, .3, 1.4);
}
.ts-knob svg { width: 16px; height: 16px; overflow: visible; }
.ts-body { fill: var(--accent-ink); transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ts-bite { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ts-rays { fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; transform-origin: 12px 12px; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.ts-sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--text); opacity: 0; transform: scale(0); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.ts-sky i:nth-child(1) { left: 9px; top: 7px; }
.ts-sky i:nth-child(2) { left: 17px; top: 15px; width: 2px; height: 2px; transition-delay: .08s; }
.ts-sky i:nth-child(3) { left: 7px; top: 18px; width: 2px; height: 2px; transition-delay: .16s; }

/* Night: the knob rolls right, the rays turn away and the shadow bites the sun into a crescent */
.theme-switch[aria-checked="true"] { background: var(--panel-3); }
.theme-switch[aria-checked="true"] .ts-knob { transform: translateX(24px) rotate(-30deg); }
.theme-switch[aria-checked="true"] .ts-body { transform: scale(1.55); }
.theme-switch[aria-checked="true"] .ts-bite { transform: translate(-7px, 5.5px); }
.theme-switch[aria-checked="true"] .ts-rays { opacity: 0; transform: rotate(90deg) scale(.4); }
.theme-switch[aria-checked="true"] .ts-sky i { opacity: .85; transform: scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .theme-switch[aria-checked="true"] .ts-sky i { animation: ts-twinkle 2.4s ease-in-out .5s infinite; }
  .theme-switch[aria-checked="true"] .ts-sky i:nth-child(2) { animation-delay: 1.3s; }
  .theme-switch[aria-checked="true"] .ts-sky i:nth-child(3) { animation-delay: .9s; }
  .theme-switch:hover:not([aria-checked="true"]) .ts-rays { transform: rotate(45deg); }
}
@keyframes ts-twinkle { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .ts-knob, .ts-body, .ts-bite, .ts-rays, .ts-sky i { transition: none; }
}

/* Switching: the new theme spreads out from the switch (theme.js), instead of the page-to-page fade */
.theming::view-transition-old(root), .theming::view-transition-new(root) { animation: none; mix-blend-mode: normal; }