/* ========================================================= Theme toggle — three-state cycle (Auto / Chiaro / Scuro) Lives inside the utility bar, before the account link. Inherits the utility bar's color/font; only handles layout, icon-state visibility, and the microlabel collapse on small screens. ========================================================= */ /* Default hidden. The toggle JS adds `.mz-js` to on boot, which reveals the button (and the wrapping
  • plus the separator we added beside it). JS-disabled browsers keep the whole insertion hidden and the utility bar reverts visually to the original WhatsApp | sep | Account layout. The page itself still resolves theme via @media (prefers-color-scheme). */ .mz-utility__theme, .mz-utility__theme + .mz-utility__sep, .mz-theme-toggle { display: none; } .mz-js .mz-utility__theme, .mz-js .mz-utility__theme + .mz-utility__sep { display: flex; } .mz-js .mz-theme-toggle { display: inline-flex; align-items: center; height: 32px; /* fills the utility bar's 32px so the tap target meets WCAG 2.2 SC 2.5.8 */ padding: 0 6px; background: transparent; border: 0; color: var(--ink-on-dark); opacity: 0.78; cursor: pointer; transition: opacity var(--d-1) var(--ease); } .mz-theme-toggle:hover { opacity: 1; } .mz-theme-toggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; opacity: 1; } /* Icon — 14×14 to match WhatsApp + account icons in the utility bar. The three glyphs (sole / luna / eclissi) are stacked absolutely so the state change cross-fades opacity instead of snapping display. */ .mz-theme-toggle__icon { position: relative; display: inline-block; width: 14px; height: 14px; flex-shrink: 0; } .mz-theme-toggle__svg { position: absolute; inset: 0; width: 14px; height: 14px; opacity: 0; transition: opacity 120ms var(--ease); } .mz-theme-toggle[data-state="auto"] .mz-theme-toggle__svg--auto, .mz-theme-toggle[data-state="light"] .mz-theme-toggle__svg--light, .mz-theme-toggle[data-state="dark"] .mz-theme-toggle__svg--dark { opacity: 1; } @media (prefers-reduced-motion: reduce) { .mz-theme-toggle__svg { transition: none; } } /* Live region for screen readers; never visible but always part of the DOM. */ .mz-theme-toggle__live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Inside the always-dark utility band, ink is light by definition. In dark page mode the band stays dark (paper-ink lifts to oklch(19%) instead of the light-mode oklch(20%)), so the toggle stays readable without an explicit dark override. */