/* Theme toggle switch — header sun/moon control */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-left: 10px;
  flex-shrink: 0;
}

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

.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #2196f3;
  transition: 0.4s;
  z-index: 0;
  overflow: hidden;
}

.switch .sun-moon {
  position: absolute;
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: yellow;
  transition: 0.4s;
}

#input:checked + .slider {
  background-color: #000;
}

#input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

#input:checked + .slider .sun-moon {
  transform: translateX(26px);
  background-color: #fff;
}

.switch .moon-dot {
  opacity: 0;
  transition: 0.4s;
  fill: gray;
}

#input:checked + .slider .sun-moon .moon-dot {
  opacity: 1;
}

.switch .slider.round {
  border-radius: 34px;
}

.switch .slider.round .sun-moon {
  border-radius: 50%;
}

#moon-dot-1 {
  left: 10px;
  top: 3px;
  position: absolute;
  width: 6px;
  height: 6px;
  z-index: 4;
}

#moon-dot-2 {
  left: 2px;
  top: 10px;
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 4;
}

#moon-dot-3 {
  left: 16px;
  top: 18px;
  position: absolute;
  width: 3px;
  height: 3px;
  z-index: 4;
}

#light-ray-1 {
  left: -8px;
  top: -8px;
  position: absolute;
  width: 43px;
  height: 43px;
  z-index: -1;
  fill: #fff;
  opacity: 0.1;
}

#light-ray-2 {
  left: -50%;
  top: -50%;
  position: absolute;
  width: 55px;
  height: 55px;
  z-index: -1;
  fill: #fff;
  opacity: 0.1;
}

#light-ray-3 {
  left: -18px;
  top: -18px;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: -1;
  fill: #fff;
  opacity: 0.1;
}

.switch .cloud-light {
  position: absolute;
  fill: #eee;
  animation: theme-toggle-cloud-move 6s infinite;
}

.switch .cloud-dark {
  position: absolute;
  fill: #ccc;
  animation: theme-toggle-cloud-move 6s infinite;
  animation-delay: 1s;
}

#cloud-1 { left: 30px; top: 15px; width: 40px; }
#cloud-2 { left: 44px; top: 10px; width: 20px; }
#cloud-3 { left: 18px; top: 24px; width: 30px; }
#cloud-4 { left: 36px; top: 18px; width: 40px; }
#cloud-5 { left: 48px; top: 14px; width: 20px; }
#cloud-6 { left: 22px; top: 26px; width: 30px; }

@keyframes theme-toggle-cloud-move {
  0% { transform: translateX(0); }
  40% { transform: translateX(4px); }
  80% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

.switch .stars {
  transform: translateY(-32px);
  opacity: 0;
  transition: 0.4s;
}

.switch .star {
  fill: #fff;
  position: absolute;
  transition: 0.4s;
  animation: theme-toggle-star-twinkle 2s infinite;
}

#input:checked + .slider .stars {
  transform: translateY(0);
  opacity: 1;
}

#star-1 { width: 20px; top: 2px; left: 3px; animation-delay: 0.3s; }
#star-2 { width: 6px; top: 16px; left: 3px; }
#star-3 { width: 12px; top: 20px; left: 10px; animation-delay: 0.6s; }
#star-4 { width: 18px; top: 0; left: 18px; animation-delay: 1.3s; }

@keyframes theme-toggle-star-twinkle {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  80% { transform: scale(0.8); }
  100% { transform: scale(1); }
}