/* theme-button.css */
.theme-button-container {
  position: relative;
  overflow: hidden;
  /* 宽高由 JS 动态设置，这里定义一下基础 */
  width: 100%;
  box-sizing: border-box;
}

.theme-button-container * {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 所有元素默认过渡，可通过 CSS 覆盖 */
.theme-button-container .container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -35em;
  margin-left: -90em;
  width: 180em;
  height: 70em;
  display: inline-block;
  vertical-align: bottom;
  transform: translate3d(0, 0, 0);
}

.theme-button-container .components {
  position: fixed;
  width: 180em;
  height: 70em;
  background-color: rgba(70, 133, 192, 1);
  border-radius: 100em;
  box-shadow: inset 0 0 5em 3em rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: 0.7s;
  transition-timing-function: cubic-bezier(0, 0.5, 1, 1);
  cursor: pointer;
}

.theme-button-container .main-button {
  margin: 7.5em 0 0 7.5em;
  width: 55em;
  height: 55em;
  background-color: rgba(255, 195, 35, 1);
  border-radius: 50%;
  box-shadow: 3em 3em 5em rgba(0, 0, 0, 0.5),
    inset -3em -5em 3em -3em rgba(0, 0, 0, 0.5),
    inset 4em 5em 2em -2em rgba(255, 230, 80, 1);
  transition: 1s;
  transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
}

.theme-button-container .moon {
  position: absolute;
  background-color: rgba(150, 160, 180, 1);
  box-shadow: inset 0 0 1em 1em rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transition: 0.5s;
  opacity: 0;
}

.theme-button-container .moon:nth-child(1) {
  top: 7.5em;
  left: 25em;
  width: 12.5em;
  height: 12.5em;
}

.theme-button-container .moon:nth-child(2) {
  top: 20em;
  left: 7.5em;
  width: 20em;
  height: 20em;
}

.theme-button-container .moon:nth-child(3) {
  top: 32.5em;
  left: 32.5em;
  width: 12.5em;
  height: 12.5em;
}

.theme-button-container .daytime-background {
  position: absolute;
  border-radius: 50%;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
}

.theme-button-container .daytime-background:nth-child(2) {
  top: -20em;
  left: -20em;
  width: 110em;
  height: 110em;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -2;
}

.theme-button-container .daytime-background:nth-child(3) {
  top: -32.5em;
  left: -17.5em;
  width: 135em;
  height: 135em;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: -3;
}

.theme-button-container .daytime-background:nth-child(4) {
  top: -45em;
  left: -15em;
  width: 160em;
  height: 160em;
  background-color: rgba(255, 255, 255, 0.05);
  z-index: -4;
}

.theme-button-container .cloud,
.theme-button-container .cloud-light {
  transform: translateY(10em);
  transition: 1s;
  transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
}

.theme-button-container .cloud-son {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  z-index: -1;
  transition: transform 6s, right 1s, bottom 1s;
}

.theme-button-container .cloud-son:nth-child(6n+1) {
  right: -20em;
  bottom: 10em;
  width: 50em;
  height: 50em;
}

.theme-button-container .cloud-son:nth-child(6n+2) {
  right: -10em;
  bottom: -25em;
  width: 60em;
  height: 60em;
}

.theme-button-container .cloud-son:nth-child(6n+3) {
  right: 20em;
  bottom: -40em;
  width: 60em;
  height: 60em;
}

.theme-button-container .cloud-son:nth-child(6n+4) {
  right: 50em;
  bottom: -35em;
  width: 60em;
  height: 60em;
}

.theme-button-container .cloud-son:nth-child(6n+5) {
  right: 75em;
  bottom: -60em;
  width: 75em;
  height: 75em;
}

.theme-button-container .cloud-son:nth-child(6n+6) {
  right: 110em;
  bottom: -50em;
  width: 60em;
  height: 60em;
}

.theme-button-container .cloud {
  z-index: -2;
}

.theme-button-container .cloud-light {
  position: absolute;
  right: 0em;
  bottom: 25em;
  opacity: 0.5;
  z-index: -3;
}

.theme-button-container .stars {
  transform: translateY(-125em);
  z-index: -2;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
}

.theme-button-container .big {
  --size: 7.5em;
}

.theme-button-container .medium {
  --size: 5em;
}

.theme-button-container .small {
  --size: 3em;
}

.theme-button-container .star {
  position: absolute;
  width: calc(2 * var(--size));
  height: calc(2 * var(--size));
}

.theme-button-container .star:nth-child(1) {
  top: 11em;
  left: 39em;
  animation-name: star;
  animation-duration: 3.5s;
}

.theme-button-container .star:nth-child(2) {
  top: 39em;
  left: 91em;
  animation-name: star;
  animation-duration: 4.1s;
}

.theme-button-container .star:nth-child(3) {
  top: 26em;
  left: 19em;
  animation-name: star;
  animation-duration: 4.9s;
}

.theme-button-container .star:nth-child(4) {
  top: 37em;
  left: 66em;
  animation-name: star;
  animation-duration: 5.3s;
}

.theme-button-container .star:nth-child(5) {
  top: 21em;
  left: 75em;
  animation-name: star;
  animation-duration: 3s;
}

.theme-button-container .star:nth-child(6) {
  top: 51em;
  left: 38em;
  animation-name: star;
  animation-duration: 2.2s;
}

@keyframes star {
  0%, 20% {
    transform: scale(0);
  }
  20%, 100% {
    transform: scale(1);
  }
}

.theme-button-container .star-son {
  float: left;
}

.theme-button-container .star-son:nth-child(1) {
  --pos: left 0;
}

.theme-button-container .star-son:nth-child(2) {
  --pos: right 0;
}

.theme-button-container .star-son:nth-child(3) {
  --pos: 0 bottom;
}

.theme-button-container .star-son:nth-child(4) {
  --pos: right bottom;
}

.theme-button-container .star-son {
  width: var(--size);
  height: var(--size);
  background-image: radial-gradient(circle var(--size) at var(--pos), transparent var(--size), #fff);
}

.theme-button-container .star {
  transform: scale(1);
  transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
  transition: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

.theme-button-container .twinkle {
  transform: scale(0);
}