/* theme switch */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* theme toggle */
#theme-toggle-button {
  font-size: 12px;
  position: relative;
  display: inline-block;
  width: 5.5em;
  cursor: pointer;
  transform: scale(0.7);
}

#theme-toggle-button #toggle {
  opacity: 0;
  width: 0;
  height: 0;
}

/* scoped: ids also exist in icon sprite */
#theme-toggle-button #container,
#theme-toggle-button #patches,
#theme-toggle-button #stars,
#theme-toggle-button #button,
#theme-toggle-button #sun,
#theme-toggle-button #moon,
#theme-toggle-button #cloud {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.25s;
}

#theme-toggle-button #toggle:checked + svg #container {
  fill: #2b4360;
}

#theme-toggle-button #toggle:checked + svg #button {
  transform: translate(28px, 2.333px);
}

#theme-toggle-button #sun {
  opacity: 1;
}

#theme-toggle-button #toggle:checked + svg #sun {
  opacity: 0;
}

#theme-toggle-button #moon {
  opacity: 0;
}

#theme-toggle-button #toggle:checked + svg #moon {
  opacity: 1;
}

#theme-toggle-button #cloud {
  opacity: 1;
}

#theme-toggle-button #toggle:checked + svg #cloud {
  opacity: 0;
}

#theme-toggle-button #stars {
  opacity: 0;
}

#theme-toggle-button #toggle:checked + svg #stars {
  opacity: 1;
}

/* wide 769px */
@media (min-width: 769px) {
  #theme-toggle-button {
    transform: scale(0.8);
  }
}

/* mobile 768px */
@media (max-width: 768px) {
  #theme-toggle-button {
    transform: scale(0.65);
  }
}