.switch-theme {
  display: flex;
}

.switch-theme__icon {
  transition: 0.3s;
}

.switch-theme__icon,
.switch-theme__toggle {
  z-index: 1;
}

.switch-theme__icon,
.switch-theme__icon-part {
  position: absolute;
}

.switch-theme__icon {
  display: block;
  top: 0.5em;
  left: 0.5em;
  width: 1.5em;
  height: 1.5em;
}

.switch-theme__icon-part {
  border-radius: 50%;
  box-shadow: 0.4em -0.4em 0 1em hsl(0, 0%, 100%) inset;
  top: 20%;
  left: 20%;
  width: 1.5em;
  height: 1.5em;
  transform: scale(0.5);
}

.switch-theme__icon-part ~ .switch-theme__icon-part {
  background-color: hsl(0, 0%, 100%);
  border-radius: 0.05em;
  top: 80%;
  left: 65%;
  transform: rotate(0deg) translateY(0.5em);
  transform-origin: 50% -50%;
  width: 0.1em;
  height: 0.3em;
}

.switch-theme__icon-part:nth-child(3) {
  transform: rotate(45deg) translateY(0.45em);
}

.switch-theme__icon-part:nth-child(4) {
  transform: rotate(90deg) translateY(0.45em);
}

.switch-theme__icon-part:nth-child(5) {
  transform: rotate(135deg) translateY(0.45em);
}

.switch-theme__icon-part:nth-child(6) {
  transform: rotate(180deg) translateY(0.45em);
}

.switch-theme__icon-part:nth-child(7) {
  transform: rotate(225deg) translateY(0.45em);
}

.switch-theme__icon-part:nth-child(8) {
  transform: rotate(270deg) translateY(0.5em);
}

.switch-theme__icon-part:nth-child(9) {
  transform: rotate(315deg) translateY(0.5em);
}

.switch-theme__toggle,
.switch-theme__toggle:before {
  display: block;
}

.switch-theme__toggle {
  background-color: hsl(48, 90%, 85%);
  border-radius: 25%/50%;
  padding: 0.25em;
  width: 6em;
  height: 3em;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.switch-theme__toggle:before {
  background-color: hsl(48, 90%, 55%);
  border-radius: 50%;
  content: "";
  width: 2.5em;
  height: 2.5em;
  transition: 0.3s;
}

.switch-theme__toggle:focus {
  outline: transparent;
}

/* Checked */
.switch-theme__toggle:checked {
  background-color: hsl(198, 90%, 15%);
}

.switch-theme__toggle:checked:before,
.switch-theme__toggle:checked ~ .switch-theme__icon {
  transform: translateX(3em);
}

.switch-theme__toggle:checked:before {
  background-color: hsl(198, 90%, 55%);
}

.switch-theme__toggle:checked ~ .switch-theme__icon .switch-theme__icon-part:nth-child(1) {
  box-shadow: 0.2em -0.2em 0 0.2em hsl(0, 0%, 100%) inset;
  transform: scale(1);
  top: 0.3em;
  left: 0.3em;
}

.switch-theme__toggle:checked ~ .switch-theme__icon .switch-theme__icon-part ~ .switch-theme__icon-part {
  opacity: 0;
}

.switch-theme__toggle:checked ~ .switch-theme__icon .switch-theme__icon-part:nth-child(2) {
  transform: rotate(45deg) translateY(0.8em);
}

.switch-theme__toggle:checked ~ .switch-theme__icon .switch-theme__icon-part:nth-child(3) {
  transform: rotate(90deg) translateY(0.8em);
}

.switch-theme__toggle:checked ~ .switch-theme__icon .switch-theme__icon-part:nth-child(4) {
  transform: rotate(135deg) translateY(0.8em);
}

.switch-theme__toggle:checked ~ .switch-theme__icon .switch-theme__icon-part:nth-child(5) {
  transform: rotate(180deg) translateY(0.8em);
}

.switch-theme__toggle:checked ~ .switch-theme__icon .switch-theme__icon-part:nth-child(6) {
  transform: rotate(225deg) translateY(0.8em);
}

.switch-theme__toggle:checked ~ .switch-theme__icon .switch-theme__icon-part:nth-child(7) {
  transform: rotate(270deg) translateY(0.8em);
}

.switch-theme__toggle:checked ~ .switch-theme__icon .switch-theme__icon-part:nth-child(8) {
  transform: rotate(315deg) translateY(0.8em);
}

.switch-theme__toggle:checked ~ .switch-theme__icon .switch-theme__icon-part:nth-child(9) {
  transform: rotate(360deg) translateY(0.8em);
}