/* public/css/darkModeToggle.css */
/* Styles for the dark mode toggle button */

#darkModeToggle {
  position: fixed;
  top: 16px;
  right: 16px;
  padding: 0.5rem;
  border-radius: 9999px;
  background-color: var(--button-gray);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  font-size: 1.125rem;
  line-height: 1.75rem;
  cursor: pointer;
  border: none;
  z-index: 50;
  transition: all 0.3s ease;
  color: var(--text-primary);
}

#darkModeToggle:hover {
  background-color: var(--button-gray-hover);
  transform: scale(1.05);
}

#darkModeToggle:active {
  transform: scale(0.95);
}

/* Dark mode icon animation */
[data-theme='dark'] #darkModeToggle {
  transform: rotate(180deg);
}

[data-theme='dark'] #darkModeToggle:hover {
  transform: rotate(180deg) scale(1.05);
}

/* Smooth theme transition for all elements */
* {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Prevent transition on page load */
.no-transition * {
  transition: none !important;
}