label#dark-mode-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
}

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

.toggle-slot {
  position: relative;
  height: 2.5em;
  width: 5em;
  border: 4px solid #e4e7ec;
  border-radius: 10em;
  background-color: white;
  transition: background-color 250ms;
  cursor: pointer;
}

.toggle-checkbox:checked ~ .toggle-slot {
  background-color: #373d3f;
}

.toggle-button {
  transform: translate(2.6em, 0.2em);
  position: absolute;
  height: 1.625em;
  width: 1.625em;
  border-radius: 50%;
  background-color: #ffeccf;
  box-shadow: inset 0px 0px 0px 0.2em #ffbb52;
  transition: background-color 250ms, border-color 250ms,
    transform 500ms cubic-bezier(0.26, 2, 0.33, 0.68);
}

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

.sun-icon {
  position: absolute;
  height: 1.5em;
  width: 1.5em;
  color: #ffbb52;
}

.sun-icon-wrapper {
  position: absolute;
  height: 1.5em;
  width: 1.5em;
  opacity: 1;
  transform: translate(0.5em, 0.45em) rotate(15deg);
  transform-origin: 100% 40%;
  transition: opacity 150ms, transform 500ms cubic-bezier(0.26, 2, 0.46, 0.71);
}

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

.moon-icon {
  position: absolute;
  height: 1.5em;
  width: 1.5em;
  color: white;
}

.moon-icon-wrapper {
  position: absolute;
  height: 1.5em;
  width: 1.5em;
  opacity: 0;
  transform: translate(2.75em, 0.5em) rotate(0deg);
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(0.26, 2.5, 0.46, 0.71);
}

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

@media screen and (max-width: 600px) {
  label#dark-mode-toggle {
    top: auto;
    bottom: 16px;
  }
  .toggle-slot {
    border: 3px solid #e4e7ec;
  }
  .toggle-button {
    transform: translate(2.8em, 0.25em);
    height: 1.5em;
    width: 1.5em;
  }
  .toggle-checkbox:checked ~ .toggle-slot .toggle-button {
    transform: translate(0.3em, 0.25em);
  }
}