html[data-atmosmood="day"] {
  --atmosmood-background: var(--atmosmood-day-background, #ffffff);
  --atmosmood-surface: var(--atmosmood-day-surface, #f5f5f5);
  --atmosmood-text: var(--atmosmood-day-text, #1e1e1e);
  --atmosmood-accent: var(--atmosmood-day-accent, #404040);
}

html[data-atmosmood="night"] {
  --atmosmood-background: var(--atmosmood-night-background, #1e1e1e);
  --atmosmood-surface: var(--atmosmood-night-surface, #292929);
  --atmosmood-text: var(--atmosmood-night-text, #f5f5f5);
  --atmosmood-accent: var(--atmosmood-night-accent, #ffffff);
}

.atmosmood-switch-wrap {
  display: inline-grid;
  line-height: 0;
  place-items: center;
}

.atmosmood-switch {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  color: var(--atmosmood-text);
  cursor: pointer;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  padding: 0.25rem;
  width: 2.5rem;
}

.atmosmood-switch:focus-visible {
  outline: 2px solid var(--atmosmood-accent);
  outline-offset: 3px;
}

.atmosmood-switch svg {
  height: 100%;
  overflow: visible;
  width: 100%;
}

.atmosmood-switch .frame {
  fill: color-mix(in srgb, currentColor 33%, transparent);
  stroke: currentColor;
  stroke-width: 4px;
}

.atmosmood-switch .sun,
.atmosmood-switch .moon {
  fill: currentColor;
  transform-origin: center;
  transition: opacity 330ms ease, transform 330ms ease;
}

html[data-atmosmood="night"] .atmosmood-switch .sun,
html[data-atmosmood="day"] .atmosmood-switch .moon {
  transform: rotate(0deg) scale(1);
}

html[data-atmosmood="night"] .atmosmood-switch .moon,
html[data-atmosmood="day"] .atmosmood-switch .sun {
  transform: rotate(30deg) scale(0.88);
}

@media (prefers-reduced-motion: reduce) {
  .atmosmood-switch .sun,
  .atmosmood-switch .moon {
    transition: none;
  }
}