/**
 * Theme Switcher Component
 * Fixed position button to toggle between light (turquoise) and dark (purple) themes
 */

.theme-switcher {
  position: fixed;
  left: 30px;
  bottom: 30px;
  z-index: var(--z-fixed, 1000);
}

@media (max-width: 767px) {
  .theme-switcher {
    left: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 16px);
  }
}

.theme-switcher__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: var(--color-primary, #6E4F95);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-switcher__toggle:hover {
  transform: scale(1.05);
}

.theme-switcher__toggle:active {
  transform: scale(0.98);
}

.theme-switcher__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white, #ffffff);
}

.theme-switcher__icon svg {
  width: 24px;
  height: 24px;
}

/* Default state: dark theme (purple) - show sun icon, hide moon */
.theme-switcher__icon--light {
  display: flex;
}

.theme-switcher__icon--dark {
  display: none;
}

/* Light theme state: show moon icon, hide sun */
html.theme-light .theme-switcher__icon--light {
  display: none;
}

html.theme-light .theme-switcher__icon--dark {
  display: flex;
}