.theme-toggle {
  --toggle-size: calc(var(--nav-h) + (var(--nav-gap) + var(--nav-border)) * 2);

  position: fixed;
  z-index: 2;
  right: var(--chrome-inset);
  top: var(--nav-top);
  display: grid;
  place-items: center;
  width: var(--toggle-size);
  height: var(--toggle-size);
  padding: 0;
  border: var(--nav-border) solid var(--nav-edge);
  border-radius: 50%;
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--effect-style-background-blur-overlay);
  backdrop-filter: var(--effect-style-background-blur-overlay);
  color: var(--nav-icon);
  cursor: pointer;
  transition:
    color 160ms ease,
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 160ms ease;
}

@media (hover: hover) {
  .theme-toggle:hover { color: var(--nav-ink-on); }
}

.nav .theme-toggle {
  position: static;
  flex: 0 0 var(--nav-h);
  width: var(--nav-h);
  height: var(--nav-h);
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav .theme-toggle[data-on] { color: var(--nav-ink-on); }

.nav .theme-toggle .theme-toggle-thumb { display: none; }

.theme-toggle:focus-visible {
  outline: var(--stroke-large) solid var(--content-expressive-red);
  outline-offset: 3px;
}

.theme-toggle-thumb {
  position: absolute;
  inset: calc(var(--nav-gap) + var(--nav-border));
  border: var(--nav-thumb-border) solid var(--nav-thumb-edge);
  border-radius: 50%;
  background: var(--nav-thumb);
  box-shadow: var(--nav-thumb-inset);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

@media (hover: hover) {
  .theme-toggle:hover .theme-toggle-thumb { opacity: 1; }
}

.theme-toggle[data-cursor-in="true"] .theme-toggle-thumb {
  opacity: 0;
  transition: opacity 120ms ease;
}

.theme-toggle svg {
  position: relative;
  width: var(--icon-medium);
  height: var(--icon-medium);
}

.theme-toggle .cut { transition: translate 520ms cubic-bezier(0.32, 0.72, 0, 1); }

.theme-toggle .rays {
  transform-origin: 12px 12px;
  transition: opacity 260ms ease, scale 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

.theme-toggle .body {
  transform-origin: 12px 12px;
  transition: scale 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

:root[data-theme="dark"] .theme-toggle .cut { translate: -8.5px 4.5px; }
:root[data-theme="dark"] .theme-toggle .rays { opacity: 0; scale: 0.3; }
:root[data-theme="dark"] .theme-toggle .body { scale: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle .cut,
  .theme-toggle .rays,
  .theme-toggle .body { transition-duration: 1ms; }
}