.toggle-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.toggle-slot {
  position: relative;
  height: 2em;
  width: 4em;
  border-radius: 2em;
  background-color: var(--toggle-color);
  box-shadow: -5px -5px 15px var(--card-shadow-color-top-left), 5px 5px 15px var(--card-shadow-color-bottom-right);
  transition: background-color .4s;
}

.toggle-slot:hover {
  cursor: pointer;
}

.toggle-checkbox:checked ~ .toggle-slot {
  background-color: var(--toggle-color);
}

.toggle-button {
  transform: translate(2.4em, 0.35em);
  position: absolute;
  height: 1.3em;
  width: 1.3em;
  border-radius: 50%;
  background-color: #ffeccf;
  box-shadow: inset 0px 0px 0px 1.5em #ffbb52;
  transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
  background-color: #485367;
  box-shadow: inset 0px 0px 0px 1.5em white;
  transform: translate(0.3em, 0.35em);
}

.sun-icon {
  position: absolute;
  height: 1.2em;
  width: 1.2em;
}

.sun-icon-wrapper {
  position: absolute;
  height: 1.2em;
  width: 1.2em;
  opacity: 1;
  transform: translate(0em, .25em) rotate(15deg);
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
  opacity: 0;
  transform: translate(1em, .25em) rotate(0deg);
}

.moon-icon {
  position: absolute;
  height: 1.2em;
  width: 1.2em;
}

.moon-icon-wrapper {
  position: absolute;
  height: 1.2em;
  width: 1.2em;
  opacity: 0;
  transform: translate(.8em, .55em) rotate(0deg);
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(.26,2.5,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
  opacity: 1;
  transform: translate(1.8em, .55em) rotate(-15deg);
}