*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-color: #f1f0ed;
  --transition-standard: 0.42s cubic-bezier(0.22, 0.78, 0.2, 1);
}

html.dark {
  --bg-color: #171c25;
}

body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background-color: var(--bg-color);
  transition: background-color var(--transition-standard);
}

.theme-toggle {
  --base-scale: clamp(22px, 2.4vw, 30px);
  --toggle-width: 5.9em;
  --toggle-height: 2.8em;
  --radius-pill: 100em;
  --sun-diameter: 2.25em;
  --sun-offset: calc((var(--toggle-height) - var(--sun-diameter)) / 2);

  --bg-toggle-light: #3d7eae;
  --bg-toggle-dark: #1d1f2c;
  --color-sun: #f0cb66;
  --color-moon: #d3d8e1;
  --color-crater: #99a2b7;
  --color-star: #f8fbff;
  --color-cloud-front: #f4fbff;
  --color-cloud-back: #a6bfd4;

  --shadow-primary: rgba(0, 0, 0, 0.25);
  --shadow-highlight: rgba(255, 255, 255, 0.9);
  --halo-color: rgba(255, 255, 255, 0.11);
  --focus-ring: rgba(108, 149, 223, 0.5);

  --sun-shadow:
    0.05em 0.125em 0.125em var(--shadow-primary),
    0 0.05em 0.125em var(--shadow-primary),
    0.05em 0.05em 0.05em 0 rgba(255, 248, 216, 0.68) inset,
    0 -0.05em 0.05em 0 #aa8830 inset,
    0 0 0 0.625em var(--halo-color),
    0 0 0 1.25em var(--halo-color),
    0 0 0 1.875em var(--halo-color);

  --cloud-shadow-front:
    0.937em 0.312em var(--color-cloud-front),
    1.437em 0.375em var(--color-cloud-front),
    2.187em 0 var(--color-cloud-front),
    2.937em 0.312em var(--color-cloud-front),
    3.625em -0.062em var(--color-cloud-front),
    4.5em -0.312em var(--color-cloud-front),
    4.625em -1.75em 0 0.437em var(--color-cloud-front);

  --cloud-shadow-back:
    -0.312em -0.312em var(--color-cloud-back),
    0.5em -0.125em var(--color-cloud-back),
    1.25em -0.062em var(--color-cloud-back),
    2em -0.312em var(--color-cloud-back),
    2.625em 0 var(--color-cloud-back),
    3.375em -0.437em var(--color-cloud-back),
    4em -0.625em var(--color-cloud-back),
    4.125em -2.125em 0 0.437em var(--color-cloud-back);

  font-size: var(--base-scale);
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0;
  cursor: pointer;
}

.theme-toggle:focus {
  outline: none;
}

.theme-toggle__container {
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  background-color: var(--bg-toggle-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
  transition: background-color var(--transition-standard);
  box-shadow:
    0.06em 0.06em 0.125em var(--shadow-highlight),
    0 0.2em 0.5em rgba(16, 22, 34, 0.18);
}

.theme-toggle:focus-visible .theme-toggle__container {
  box-shadow:
    0 0 0 0.12em rgba(255, 255, 255, 0.72),
    0 0 0 0.3em var(--focus-ring),
    0 0.2em 0.5em rgba(16, 22, 34, 0.22);
}

html.dark .theme-toggle__container {
  background-color: var(--bg-toggle-dark);
}

.theme-toggle__container::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  box-shadow: 0 0.05em 0.187em rgba(0, 0, 0, 0.45) inset;
  pointer-events: none;
}

.theme-toggle__sun {
  position: absolute;
  top: var(--sun-offset);
  width: var(--sun-diameter);
  height: var(--sun-diameter);
  border-radius: 50%;
  background-color: var(--color-sun);
  transform: translateX(var(--sun-offset));
  overflow: hidden;
  transition: transform var(--transition-standard);
  box-shadow: var(--sun-shadow);
}

html.dark .theme-toggle__container .theme-toggle__sun {
  transform: translateX(
    calc(var(--toggle-width) - var(--sun-diameter) - var(--sun-offset))
  );
}

.theme-toggle__moon-mask {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-moon);
  transform: translateX(100%);
  transition: transform var(--transition-standard);
  box-shadow:
    0.062em 0.062em 0.062em 0 rgba(254, 255, 239, 0.61) inset,
    0 -0.062em 0.062em 0 #969696 inset;
}

html.dark .theme-toggle__container .theme-toggle__moon-mask {
  transform: translateX(0);
}

.theme-toggle__crater {
  position: absolute;
  border-radius: 50%;
  background-color: var(--color-crater);
  box-shadow: 0 0.03em 0.06em var(--shadow-primary) inset;
}

.theme-toggle__crater:nth-of-type(1) {
  top: 0.75em;
  left: 0.3em;
  width: 0.75em;
  height: 0.75em;
}

.theme-toggle__crater:nth-of-type(2) {
  top: 0.9em;
  left: 1.375em;
  width: 0.375em;
  height: 0.375em;
}

.theme-toggle__crater:nth-of-type(3) {
  top: 0.3em;
  left: 0.8em;
  width: 0.25em;
  height: 0.25em;
}

.theme-toggle__stars {
  position: absolute;
  left: 0.45em;
  top: 0.4em;
  width: 2.9em;
  height: 1.2em;
  transform: translateY(-2em);
  transition: transform var(--transition-standard);
  background-image:
    radial-gradient(circle at 10% 72%, var(--color-star) 0.08em, transparent 0.09em),
    radial-gradient(circle at 32% 20%, var(--color-star) 0.11em, transparent 0.12em),
    radial-gradient(circle at 55% 66%, var(--color-star) 0.09em, transparent 0.1em),
    radial-gradient(circle at 78% 24%, var(--color-star) 0.1em, transparent 0.11em),
    radial-gradient(circle at 96% 78%, var(--color-star) 0.07em, transparent 0.08em);
}

html.dark .theme-toggle__container .theme-toggle__stars {
  transform: translateY(0.45em);
}

.theme-toggle__clouds {
  position: absolute;
  left: 0.3em;
  top: 2em;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background-color: var(--color-cloud-front);
  transform: translateY(0);
  transition: transform var(--transition-standard);
  box-shadow: var(--cloud-shadow-front), var(--cloud-shadow-back);
}

html.dark .theme-toggle__container .theme-toggle__clouds {
  transform: translateY(3.7em);
}

.theme-toggle:hover .theme-toggle__sun {
  transform: translateX(calc(var(--sun-offset) + 0.187em));
}

html.dark .theme-toggle:hover .theme-toggle__sun {
  transform: translateX(
    calc(var(--toggle-width) - var(--sun-diameter) - var(--sun-offset) - 0.187em)
  );
}

@media (prefers-reduced-motion: reduce) {
  body,
  .theme-toggle__container,
  .theme-toggle__sun,
  .theme-toggle__moon-mask,
  .theme-toggle__stars,
  .theme-toggle__clouds {
    transition-duration: 0.16s;
    transition-delay: 0s;
    transition-timing-function: linear;
  }
}