/**
 * Light/dark toggle pill — visual state only.
 * Design tokens (including the dark-mode var swap) live in assets/css/tokens.css.
 *
 * The toggle is intended to be embedded in an Elementor (or Gutenberg) header
 * template as an element with class `.eversoul-theme-toggle`, containing
 * `.eversoul-theme-toggle__knob`, `.eversoul-theme-toggle__sun`,
 * `.eversoul-theme-toggle__moon` children. This stylesheet only handles the
 * visual state — the JS binds the click + persists the choice.
 */

:root {
	--eversoul-toggle-transition: transform 200ms ease, opacity 200ms ease;
}

.eversoul-theme-toggle__knob,
.eversoul-theme-toggle__sun,
.eversoul-theme-toggle__moon {
	transition: var(--eversoul-toggle-transition);
}

/* Icons sit on the track, opposite the knob, vertically centered.
   The one shown indicates the target mode (what click will switch TO). */
.eversoul-theme-toggle__sun,
.eversoul-theme-toggle__moon {
	top: 50%;
	inset-block-start: auto;
	transform: translateY(-50%);
}
.eversoul-theme-toggle__sun  { opacity: 0; }
.eversoul-theme-toggle__moon { opacity: 1; }

html[data-theme="dark"] .eversoul-theme-toggle__knob { transform: translateX(-16px); }
html[data-theme="dark"] .eversoul-theme-toggle__sun  { opacity: 1; }
html[data-theme="dark"] .eversoul-theme-toggle__moon { opacity: 0; }

.eversoul-theme-toggle {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.eversoul-theme-toggle:focus-visible {
	outline: 2px solid var(--accent-highlight);
	outline-offset: 2px;
}