.container {
  display: inline-flex;
  position: relative;
}

.themeButton {
  position: relative;
  transition: transform var(--animation-duration-normal) ease;
}

.themeButton:hover {
  transform: scale(1.05);
}

.icon {
  color: var(--foreground);
  transition: transform var(--animation-duration-normal) ease;
}

.menuIcon {
  margin-right: var(--spacing-2);
  color: currentColor;
}

.activeItem {
  font-weight: 500;
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary), transparent 90%) !important;
}

.checkmark {
  margin-left: auto;
  font-weight: bold;
}

:global(.dark) .icon {
  color: var(--foreground);
}