.switch {
  --width: 2.25em;
  --height: 1em;
  --knob-scale: 1.2;
  --knob-size: calc(var(--height) * var(--knob-scale));
  --knob-bottom: calc((1 - var(--knob-scale)) * var(--height) * 0.5 - 1px);
  --knob-left: calc((1 - var(--knob-scale)) * var(--height) * 0.25);
  --knob-translate: calc(var(--width) - var(--knob-size) - var(--knob-left));

  display: inline-block;
  position: relative;
  width: var(--width);
  height: var(--height);
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Pill shaped background for round slider knob */
.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: hsl(0deg 0% 0% / 10%);
  transition: 0.3s;
  border-radius: 1em;
  border: 1px solid transparent;
}

/* Round slider knob */
.switch .slider::before {
  position: absolute;
  content: "";
  height: var(--knob-size);
  width: var(--knob-size);
  left: var(--knob-left);
  bottom: var(--knob-bottom);
  background: hsl(0deg 0% 98% / 100%);
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 0 3px 0 hsl(0deg 0% 0% / 45%);
}

.switch input:hover + .slider {
  border: 1px solid var(--color-accent);
}

.switch input:checked + .slider {
  background: hsl(0deg 0% 81% / 30%);
}

.switch input:checked + .slider::before {
  background: hsl(0deg 0% 100% / 100%);
  transform: translateX(var(--knob-translate));
}

/* Sun */
.switch.theme input + .slider::before {
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.06-1.06a.75.75 0 0 1 1.06 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0ZM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0ZM3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8Zm13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8Zm-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13Zm3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061ZM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-1.06-1.06a.75.75 0 0 1 0-1.06Z'%3E%3C/path%3E%3C/svg%3E");
}

/* Moon */
.switch.theme input:checked + .slider::before {
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678Z'%3E%3C/path%3E%3C/svg%3E");
}