/**
 * Dark Mode Toggle Button Styles
 * Minimal CSS for the toggle button appearance
 */

.wcg-theme-toggle {
  position: fixed;
  top: 200px;
  right: 0;
  z-index: 1000;
}

.wcg-theme-toggle__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px 0 0 0; /* Top-left rounded, other corners square */
  background-color: var(--c-primary, #001489);
  color: var(--c-text-inverse, white);
  border: 2px solid var(--c-accent, #4c4c4c);
  border-right: none; /* No border on wall side */
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
}

.wcg-theme-toggle__button:hover {
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
}

.wcg-theme-toggle__button:focus {
  outline: none;
}

.wcg-theme-toggle__icon {
  font-size: 1.5rem;
}

/* Hide moon icon in light mode, show sun icon */
.wcg-theme-toggle[data-theme='light'] .wcg-theme-toggle__icon--moon {
  display: none;
}

.wcg-theme-toggle[data-theme='light'] .wcg-theme-toggle__icon--sun {
  display: block;
}

/* Hide sun icon in dark mode, show moon icon */
.wcg-theme-toggle[data-theme='dark'] .wcg-theme-toggle__icon--sun {
  display: none;
}

.wcg-theme-toggle[data-theme='dark'] .wcg-theme-toggle__icon--moon {
  display: block;
}

/* Smooth transition for theme changes */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}