.dark-mode-toggle {
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: .2s ease;
  padding: 0;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
}

.dark-mode-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Suppress the default focus ring from WP theme; we use focus-visible above */
.dark-mode-toggle:focus:not(:focus-visible) {
    outline: none;
}

.dark-mode-toggle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Moon = shown when dark mode is OFF (click to enable dark mode) */
.dark-mode-toggle__icon--sun {
    display: none;
}

/* Sun = shown when dark mode is ON (click to disable dark mode) */
.is-dark-mode .dark-mode-toggle__icon--moon {
    display: none;
}

.is-dark-mode .dark-mode-toggle__icon--sun {
    display: flex;
}

@media (prefers-reduced-motion: reduce) {
    .dark-mode-toggle {
        transition: none;
    }
}