/* The two-state pill. Same night-sky track and white disc as the footer
   eclipse toggle. Geometry: 48x26 pill, 18px disc, 3px inset, travel 22.
   Theme (light / dark) adds the bite in footer.css. Any other pair
   (.rs-pill) slides the disc on aria-checked and has no bite. */

.theme-toggle {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hit);
  min-height: var(--hit);
}
.rs-pill {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hit);
  min-height: var(--hit);
}

.theme-toggle-track,
.rs-pill-track {
  position: relative;
  display: block;
  width: 48px;
  height: 26px;
  border-radius: 100px;
  background-color: var(--g-elev);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.theme-toggle-track::before,
.theme-toggle-track::after,
.rs-pill-track::before {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: 0.5s ease;
}
.theme-toggle-track::before,
.rs-pill-track::before { background-color: var(--white); }
.rs-pill[aria-checked="true"] .rs-pill-track::before { transform: translateX(22px); }

.rs-pill:focus-visible { outline: none; }
.rs-pill:focus-visible .rs-pill-track {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}