/* Theme switch. Knob position, track fill and icon cross-fade are written per frame by js/ui/theme-switch.js. */

.tsw{
  --w:44px;--h:24px;--k:18px;--pad:3px;
  position:relative;flex-shrink:0;
  width:var(--w);height:var(--h);
  padding:0;border:0;background:none;color:inherit;
  cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
/* 44px-tall hit area without changing the visual size */
.tsw::before{content:'';position:absolute;inset:-10px -8px}
.tsw:focus-visible{outline:none}
/* press feedback lives on the knob; don't also shrink the whole control */
.tsw:active{transform:none;opacity:1}
.tsw:focus-visible .tsw-track{outline:1px solid var(--hot);outline-offset:3px}

.tsw-track{
  position:absolute;inset:0;border-radius:999px;overflow:hidden;
  border:1px solid var(--faint);
}
.tsw-fill{position:absolute;inset:0;background:var(--hot);opacity:1}

.tsw-knob{
  position:absolute;top:var(--pad);left:var(--pad);
  width:var(--k);height:var(--k);border-radius:999px;
  background:var(--ink);transform-origin:0 50%;
  display:grid;place-items:center;
}
.tsw-knob svg{
  grid-area:1/1;width:calc(var(--k) * .6);height:calc(var(--k) * .6);
  color:var(--paper);
}

@media (pointer:coarse){
  .tsw{--w:52px;--h:30px;--k:24px}
}