#sv-theme-toggle{
  --toggle-height:32px;
  --toggle-width:96px;
  --ball-size:calc(var(--toggle-height) - 4px);
  --icon-size:calc(var(--ball-size) / 2);
  
  width:var(--toggle-width);
  height:var(--toggle-height);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  border-radius:999px;
  background-color:rgb(64 64 64);
  outline:1px solid rgba(128, 128, 128, 0.1);
  background:linear-gradient(90deg, rgba(100,100,110,0.12), rgba(60,60,70,0.08));
  transition:background 220ms ease, box-shadow 220ms ease, transform 180ms ease;
}
#sv-theme-toggle.sv-light{
  background:linear-gradient(270deg, rgba(250,204,21,0.13), rgba(245,158,11,0.2));
  box-shadow:0 2px 8px rgba(245,158,11,0.1) inset;
}
#sv-theme-toggle.sv-auto{
  background:linear-gradient(0deg, rgba(59,130,246,0.10), rgba(96,165,250,0.2));
  box-shadow:0 2px 10px rgba(59,130,246,0.1) inset;
}
#sv-theme-toggle.sv-dark{
  background:linear-gradient(90deg, rgba(124,58,237,0.10), rgba(99,102,241,0.2));
  box-shadow:0 2px 10px rgba(99,102,241,0.1) inset;
}

#sv-theme-toggle svg{
  width:14px;
  height:14px;
  display:block;
  fill:currentColor;
  transition:transform 160ms ease, color 160ms ease;
}
.sv-icon-container{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--toggle-height);
  height:var(--toggle-height);
  color:rgba(180, 180, 180, 0.9);
  font-size:var(--icon-size);
  transition:transform 160ms ease, color 160ms ease;
  user-select:none;
}
#sv-theme-ball{
  position:absolute;
  top:2px;
  left:2px;
  width:var(--ball-size);
  height:var(--ball-size);
  border-radius:9999px;
  border:1px solid #80808080;
  box-shadow:0 8px 18px rgba(2,6,23,0.18), 0 2px 6px rgba(2,6,23,0.2);
  transform:translateX(0);
  transition:transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background 220ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
#sv-theme-toggle.sv-light #sv-theme-ball{
  transform:translateX(0);
}
#sv-theme-toggle.sv-auto #sv-theme-ball{
  transform:translateX(calc((var(--toggle-width) / 2) - (var(--ball-size) / 2) - 2px));
}
#sv-theme-toggle.sv-dark #sv-theme-ball{
  transform:translateX(calc(var(--toggle-width) - var(--ball-size) - 4px));
}
#sv-theme-toggle.sv-light #sv-sun svg{ color:#f59e0b; transform:scale(1.25); }
#sv-theme-toggle.sv-auto  #sv-auto svg{ color:#3b82f6; transform:scale(1.25); }
#sv-theme-toggle.sv-dark  #sv-moon svg{ color:#8b5cf6; transform:scale(1.25); }
#sv-theme-toggle:focus-visible{
  box-shadow:0 0 0 3px rgba(99,102,241,0.14);
  outline:none;
}