.tsa-theme-switch{
  --tsa-tt-accent: var(--wp--preset--color--custom-accent, #83CBEB);
  --tsa-tt-ink: var(--wp--preset--color--custom-heading-text, #E6E6E6);
  --tsa-tt-bg: var(--wp--preset--color--custom-base-bg, #1b1b1b);
  --tsa-tt-footer: var(--wp--preset--color--custom-footer, #1e1e1e);
  --tsa-tt-border: var(--wp--preset--color--custom-border, #2A2C2F);
  --tsa-tt-muted: var(--wp--preset--color--custom-muted, #9FA1A4);
  --tsa-tt-seg: 32px;
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:3px;
  border-radius:999px;
  background: color-mix(in srgb, var(--tsa-tt-footer) 82%, var(--tsa-tt-ink) 18%);
  border:1px solid var(--tsa-tt-border);
  box-sizing:border-box;
  font-family:inherit;
  line-height:0;
  transition: background .18s ease, border-color .18s ease;
}

.tsa-theme-switch__thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:var(--tsa-tt-seg);
  height:22px;
  border-radius:999px;
  background: var(--tsa-tt-accent);
  transition: transform .2s ease;
  z-index:0;
}

.tsa-theme-switch__seg{
  position:relative;
  z-index:1;
  width:var(--tsa-tt-seg);
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  margin:0;
  padding:0;
  cursor:pointer;
  color: var(--tsa-tt-muted);
  font-family:inherit;
  transition: color .18s ease;
}

.tsa-theme-switch__seg svg{
  display:block;
}

.tsa-theme-switch__txt{
  font-size:9px;
  font-variant: small-caps;
  letter-spacing:.3px;
  font-weight:700;
  line-height:1;
}

.tsa-theme-switch[data-tt-state="auto"] .tsa-theme-switch__thumb{
  transform: translateX(0);
}

.tsa-theme-switch[data-tt-state="light"] .tsa-theme-switch__thumb{
  transform: translateX(var(--tsa-tt-seg));
}

.tsa-theme-switch[data-tt-state="dark"] .tsa-theme-switch__thumb{
  transform: translateX(calc(var(--tsa-tt-seg) * 2));
}

.tsa-theme-switch[data-tt-state="auto"] .tsa-theme-switch__seg[data-mode="auto"],
.tsa-theme-switch[data-tt-state="light"] .tsa-theme-switch__seg[data-mode="light"],
.tsa-theme-switch[data-tt-state="dark"] .tsa-theme-switch__seg[data-mode="dark"]{
  color: var(--tsa-tt-bg);
}

.tsa-theme-switch__seg:focus{
  outline:none;
}

.tsa-theme-switch__seg:focus-visible{
  outline:2px solid var(--tsa-tt-accent);
  outline-offset:2px;
  border-radius:999px;
}

@media (prefers-reduced-motion: reduce){
  .tsa-theme-switch__thumb{
    transition:none;
  }
}