.map-theme-toggle {
  overflow: hidden;
}

.map-theme-toggle-icon {
  position: absolute;
  width: 1rem;
  height: 1rem;
  color: currentColor;
  transition:
    opacity var(--map-transition-fast, 120ms ease),
    transform var(--map-transition-fast, 120ms ease);
}

.map-theme-toggle-icon.is-sun {
  width: 1.15rem;
  height: 1.15rem;
  background: currentColor;
  mask: url("../../icons/esg/sun.svg") center / contain no-repeat;
  -webkit-mask: url("../../icons/esg/sun.svg") center / contain no-repeat;
}

.map-theme-toggle-icon.is-moon {
  border-radius: 50%;
  box-shadow: inset -0.28rem -0.08rem 0 0 currentColor;
}

.map-theme-toggle[aria-pressed="false"] .map-theme-toggle-icon.is-sun,
.map-theme-toggle[aria-pressed="true"] .map-theme-toggle-icon.is-moon {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

.map-theme-toggle[aria-pressed="false"] .map-theme-toggle-icon.is-moon {
  opacity: 0;
  transform: translateY(0.75rem) rotate(-30deg);
}

.map-theme-toggle[aria-pressed="true"] .map-theme-toggle-icon.is-sun {
  opacity: 0;
  transform: translateY(-0.75rem) rotate(30deg);
}