.theme-icon {
  color: var(--color-title);
  height: var(--text-2xl);
  position: absolute;
  transition: opacity var(--transition-long), transform var(--transition-long);
  width: var(--text-2xl);
}

.theme-icon-sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.theme-icon-moon {
  opacity: 0;
  transform: scale(0) rotate(90deg);
}

.dark .theme-icon-sun {
  opacity: 0;
  transform: scale(0) rotate(-90deg);
}

.dark .theme-icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}