#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);
}

#sv-theme-toggle svg{
  width:14px;
  height:14px;
}

.sv-icon-container{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--toggle-height);
  height:var(--toggle-height);
  fill:rgb(209 213 219);
  font-size:var(--icon-size);
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms;
}

#sv-theme-ball{
  border:2px solid;
  border-color:rgb(255 255 255);
  border-radius:999px;
  position:absolute;
  padding:2px;
  width:var(--ball-size);
  height:var(--ball-size);
  top:2px;
  left:2px;
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms;
}


#sv-theme-toggle.sv-light #sv-theme-ball{
  transform:translateX(0);
}

#sv-theme-toggle.sv-auto #sv-theme-ball{
  transform:translateX(calc(calc(var(--toggle-width) / 2) - calc(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{
  fill:rgb(234 179 8);
}

#sv-theme-toggle.sv-auto #sv-auto{
  fill:rgb(59 130 246);
}

#sv-theme-toggle.sv-dark #sv-moon{
  fill:rgb(168 85 247);
}