/* fx.css · micro/theme-wipe, switching theme wipes the new colours out from the switch · owner: Lizzy East · all rights reserved */

/* The block wears its theme's colours through four tokens (--fx-t-bg, --fx-t-ink,
   --fx-t-soft, --fx-t-accent) that anything inside can use; data-fx-theme="dark" swaps
   them. fx.js turns the switch on and, where View Transitions exist and motion is
   allowed, reveals the new colours in a circle that grows from the switch over the
   old ones. Elsewhere, or with motion off, the colours change at once. Without script
   the switch stays disabled and the block keeps its first theme. */
[data-fx~="micro/theme-wipe"] {
  --fx-t-bg: var(--fx-theme-paper, #f4f5f7);
  --fx-t-ink: var(--fx-theme-ink, #111117);
  --fx-t-soft: var(--fx-theme-soft, #4a4f5e);
  --fx-t-accent: var(--fx-theme-accent, #2340ff);
  --fx-t-line: var(--fx-theme-line, #c7ccd8);
  background: var(--fx-t-bg);
  color: var(--fx-t-ink);
  border-color: var(--fx-t-line);
  color-scheme: light;
}
[data-fx~="micro/theme-wipe"][data-fx-theme="dark"] {
  --fx-t-bg: var(--fx-theme-night, #111117);
  --fx-t-ink: var(--fx-theme-on-night, #f4f5f7);
  --fx-t-soft: var(--fx-theme-on-night-soft, #b8bdcc);
  --fx-t-accent: var(--fx-theme-glow, #cfff3e);
  --fx-t-line: var(--fx-theme-night-line, #1f2130);
  color-scheme: dark;
}
[data-fx~="micro/theme-wipe"] em { color: var(--fx-t-accent); }
[data-fx~="micro/theme-wipe"] a { color: var(--fx-t-ink); }
[data-fx~="micro/theme-wipe"] [data-fx-soft] { color: var(--fx-t-soft); }
[data-fx~="micro/theme-wipe"] :focus-visible { outline-color: var(--fx-t-accent); }

/* The switch: a track and a knob, pressed when dark. */
[data-fx~="micro/theme-wipe"] [data-fx-theme-switch] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  margin-left: auto;
  padding: 0.4rem 1.1rem 0.4rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
[data-fx~="micro/theme-wipe"] [data-fx-theme-switch]:disabled { cursor: default; }
[data-fx~="micro/theme-wipe"] [data-fx-theme-switch]::before {
  content: "";
  flex: none;
  width: 2.75rem;
  height: 1.6rem;
  border-radius: 999px;
  background: currentColor;
}
[data-fx~="micro/theme-wipe"] [data-fx-theme-switch]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.65rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -0.6rem;
  border-radius: 50%;
  background: var(--fx-t-bg);
}
[data-fx~="micro/theme-wipe"] [data-fx-theme-switch][aria-pressed="true"]::after { translate: 1.15rem 0; }
@media (prefers-reduced-motion: no-preference) {
  html.fx-armed [data-fx~="micro/theme-wipe"] [data-fx-theme-switch]::after { transition: translate 300ms var(--fx-ease); }
  ::view-transition-old(fx-theme-wipe),
  ::view-transition-new(fx-theme-wipe) { animation: none; mix-blend-mode: normal; }
}