/**
 * ============================================================================
 * theme-toggle.css — .theme-toggle BEM Block
 * ============================================================================
 *
 * PURPOSE:
 *   Styles the theme toggle control in the site header. Cycles
 *   System → Light → Dark. All colours from design tokens only.
 *
 * BEM STRUCTURE:
 *   .theme-toggle           — Wrapper
 *   .theme-toggle__button   — The button control
 *   .theme-toggle__icon     — Icon span (one visible per state)
 *   .theme-toggle__icon--system, --light, --dark — State modifiers
 *
 * VISIBILITY:
 *   Only one icon is shown at a time. Default (no data-theme) = system.
 *   [data-theme="light"] shows light icon, [data-theme="dark"] shows dark.
 *
 * ============================================================================
 */

.theme-toggle {
  flex-shrink: 0;
}

.theme-toggle__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--color-on-primary-hover);
  color: var(--color-on-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.theme-toggle__button:hover,
.theme-toggle__button:focus-visible {
  background-color: var(--color-on-primary-active);
  outline: none;
}

.theme-toggle__button:focus-visible {
  border-color: var(--color-on-primary);
}

/* Show only the icon for the current theme state */
.theme-toggle__icon {
  position: absolute;
  pointer-events: none;
}

.theme-toggle__icon--system {
  position: static;
}

.theme-toggle__icon--light,
.theme-toggle__icon--dark {
  display: none;
}

/* User chose light: show sun */
[data-theme="light"] .theme-toggle__icon--system {
  display: none;
}

[data-theme="light"] .theme-toggle__icon--light {
  display: inline-block;
  position: static;
}

[data-theme="light"] .theme-toggle__icon--dark {
  display: none;
}

/* User chose dark: show moon */
[data-theme="dark"] .theme-toggle__icon--system {
  display: none;
}

[data-theme="dark"] .theme-toggle__icon--light {
  display: none;
}

[data-theme="dark"] .theme-toggle__icon--dark {
  display: inline-block;
  position: static;
}