:root {
  /** sunny side **/
  --blue-background: #f3f6f9;
  --blue-border: #72CCE3;
  --blue-color: #96DCEE;
  --yellow-background: #FFFAA8;
  --yellow-border: #F5EB71;
  /** dark side **/
  --indigo-background: #454d55;
  --indigo-border: #5D6BAA;
  --indigo-color: #6B7ABB;
  --gray-border: #eae8e8;
  --gray-dots: #E8E8EA;
  /** general **/
  --white: #fff;
}
* {
  margin: 0;
  padding: 0;
}
.background {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--blue-background);
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 250ms ease-in;
}
.toggle--checkbox {
  display: none;
}
.toggle--checkbox:checked {
  /** This will all flip from sun to moon **/
  /** Change the label color **/
}
.toggle--checkbox:checked ~ .background {
  background: var(--indigo-background);
}
.toggle--checkbox:checked + .toggle--label {
  background: var(--indigo-color);
  border-color: var(--indigo-border);
  /** Change the cloud to stars **/
  /** Change the sun into the moon **/
  /** Show the dimples on the moon **/
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background {
  left: 60px;
  width: 5px;
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background:before {
  width: 5px;
  height: 5px;
  top: -25px;
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background:after {
  width: 5px;
  height: 5px;
  left: -30px;
  top: 20px;
}
.toggle--checkbox:checked + .toggle--label:before {
  background: var(--white);
  border-color: var(--gray-border);
  animation-name: switch;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
}
.toggle--checkbox:checked + .toggle--label:after {
  transition-delay: 350ms;
  opacity: 1;
}
.toggle--label {
  /** Placeholder element, starting at blue **/
  width: 50px;
  height: 25px;
  background: var(--blue-color);
  border-radius: 100px;
  border: 5px solid var(--blue-border);
  display: flex;
  position: relative;
  transition: all 350ms ease-in;
  margin-top:6px;
  /** The sun cloud and moon stars **/
  /** Sun/Moon element **/
  /** Gray dots on the moon **/
}
/* ก้อนเมฆตอนกลางวัน */
/* .toggle--label-background {
  width: 5px;
  height: 1px;
  border-radius: 5px;
  position: relative;
  background: var(--white);
  left: -3px;
  top: 4px;
  transition: all 150ms ease-in;
}
.toggle--label-background:before {
  content: "";
  position: absolute;
  top: -5px;
  width: 10px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: -20px;
  transition: all 150ms ease-in;
}
.toggle--label-background:after {
  content: "";
  position: absolute;
  top: 5px;
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: -10px;
  transition: all 150ms ease-in;
} */
.toggle--label:before {
  animation-name: reverse;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
  transition: all 350ms ease-in;
  content: "";
  width: 20px;
  height: 20px;
  border: 5px solid var(--yellow-border);
  top: -2px;
  left: 1px;
  position: absolute;
  border-radius: 82px;
  background: var(--yellow-background);
}
/* ก้อนดาวกลางคืน
.toggle--label:after {
  transition-delay: 0ms;
  transition: all 250ms ease-in;
  position: absolute;
  content: "";
  box-shadow: var(--gray-dots) -13px 0 0 2px, var(--gray-dots) -24px 14px 0 -2px;
  left: 10px;
  top: 1px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
  opacity: 0;
} */
/* ตอนกลางคืน */
@keyframes switch {
  0% {
    left: 4px;
  }
  60% {
    left: 20px;
    width: 20px;
  }
  100% {
    left: 20px;
    width: 20px;
  }
}
/* ตอนกลางวัน */
@keyframes reverse {
  0% {
    left: 10px;
    width: 20px;
  }
  60% {
    left: 20px;
    width: 20px;
  }
  100% {
    left: 0px;
  }
}