.theme-toggle{--tt-active:#000;--tt-idle:rgba(0,0,0,.4);display:inline-flex;align-items:center;gap:var(--tabs-gap);padding:var(--tabs-pad);border:1px solid var(--tabs-border);border-radius:calc(var(--tabs-h)/2 + var(--tabs-pad));background:var(--tabs-track)}@supports (corner-shape:squircle){.theme-toggle{corner-shape:squircle;border-radius:calc(var(--tabs-h)*.53 + var(--tabs-pad))}}.theme-toggle{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;direction:ltr;font-family:var(--font-sans)}.theme-toggle__thumb{background:var(--tabs-knob);box-shadow:var(--tabs-knob-shadow);color:var(--ink);position:absolute;top:var(--tabs-pad);left:var(--tabs-pad);width:calc((100% - 2*var(--tabs-pad) - var(--tabs-gap))/2);height:var(--tabs-h);border-radius:calc(var(--tabs-h)/2)}@supports (corner-shape:squircle){.theme-toggle__thumb{corner-shape:squircle;border-radius:calc(var(--tabs-h)*.53)}}.theme-toggle__thumb{transition:transform .3s;will-change:transform}.theme-toggle__thumb.is-dark{transform:translate(calc(100% + var(--tabs-gap)))}.theme-toggle__opt{outline:none}.theme-toggle__opt:focus-visible{outline:var(--ring-w) solid var(--ring);outline-offset:var(--ring-offset)}.theme-toggle__opt{display:inline-flex;align-items:center;justify-content:center;height:var(--tabs-h);padding:0 var(--tabs-px);border:0;border-radius:calc(var(--tabs-h)/2);font-size:var(--tabs-fs);font-weight:var(--tabs-fw);line-height:1;white-space:nowrap}@supports (corner-shape:squircle){.theme-toggle__opt{corner-shape:squircle;border-radius:calc(var(--tabs-h)*.53)}}.theme-toggle__opt{position:relative;z-index:1;gap:6px;background:transparent;color:var(--tt-idle);font-family:inherit;cursor:pointer;transition:color .3s}.theme-toggle__opt svg{width:16px;height:16px;transition:transform var(--dur-base) var(--ease-spring)}.theme-toggle__opt.is-active,.theme-toggle__opt:not(.is-active):hover{color:var(--tt-active)}.theme-toggle__opt.is-active svg{transform:scale(1.1)}.theme-toggle__opt:active svg{transform:scale(.85)}.theme-toggle--compact .theme-toggle__opt{padding:0;width:var(--tabs-h)}[data-theme=dark] .theme-toggle{--tt-active:#fff;--tt-idle:hsla(0,0%,100%,.4)}
