/* One shared switch appearance for the website and the worksheet. */
:is(#theme-control,.sheet-theme).theme-switch { --switch-ink:var(--header-ink,var(--ink)); --switch-paper:var(--header-paper,var(--paper)); position:relative; display:flex; flex-shrink:0; padding:3px; height:32px; transform:translateY(-3px); border:1px solid var(--switch-ink); border-radius:30px; background:var(--switch-ink); color:var(--switch-paper); transition:background .35s,border-color .35s; }
:is(#theme-control,.sheet-theme).theme-switch button { position:relative; z-index:1; width:60px; padding:0; border:0; border-radius:24px; background:transparent; color:inherit; font-size:10px; font-weight:600; letter-spacing:.035em; transition:color .25s; }
:is(#theme-control,.sheet-theme).theme-switch button[aria-pressed="true"] { background:transparent; color:var(--switch-ink); }
:is(#theme-control,.sheet-theme).theme-switch .theme-thumb { position:absolute; left:3px; top:3px; bottom:3px; width:60px; border-radius:22px; background:var(--switch-paper); transition:transform .4s cubic-bezier(.22,1,.36,1),background .35s; }
.sheet-app[data-theme="dark"] .theme-switch .theme-thumb { transform:translateX(100%); }
:is(#theme-control,.sheet-theme).theme-switch .sun-icon,:is(#theme-control,.sheet-theme).theme-switch .moon-icon { margin-right:3px; font-size:12px; vertical-align:-1px; }
:is(#theme-control,.sheet-theme).theme-switch button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(min-width:761px) and (max-width:1250px) { :is(#theme-control,.sheet-theme).theme-switch { height:26px; padding:2px; } :is(#theme-control,.sheet-theme).theme-switch button { font-size:9px; } :is(#theme-control,.sheet-theme).theme-switch button,:is(#theme-control,.sheet-theme).theme-switch .theme-thumb { width:54px; } :is(#theme-control,.sheet-theme).theme-switch .theme-thumb { left:2px; top:2px; bottom:2px; } }
@media(max-width:760px) { :is(#theme-control,.sheet-theme).theme-switch { height:27px; padding:2px; transform:translateY(-2px); } :is(#theme-control,.sheet-theme).theme-switch button { font-size:9px; } :is(#theme-control,.sheet-theme).theme-switch button,:is(#theme-control,.sheet-theme).theme-switch .theme-thumb { width:54px; } :is(#theme-control,.sheet-theme).theme-switch .theme-thumb { left:2px; top:2px; bottom:2px; } }
@media(prefers-reduced-motion:reduce) { :is(#theme-control,.sheet-theme).theme-switch,:is(#theme-control,.sheet-theme).theme-switch button,:is(#theme-control,.sheet-theme).theme-switch .theme-thumb { transition:none; } }