/*
 * XO DNA Theme Mode Toggle — frontend + editor shared styles.
 *
 * Loaded on the frontend and inside the block editor. Kept transparent
 * and structural so child themes can restyle final visual treatment with
 * normal later-loaded CSS.
 */

.xo-theme-mode-toggle {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0.5rem;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.xo-theme-mode-toggle:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* Both icons share the same grid cell so swapping the visible icon never
   shifts layout. */
.xo-theme-mode-toggle__icon {
	grid-area: 1 / 1;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.xo-theme-mode-toggle__icon-svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
}

.xo-theme-mode-toggle__icon--sun {
	display: none;
}

html[data-xo-theme="dark"] .xo-theme-mode-toggle__icon--moon {
	display: none;
}

html[data-xo-theme="dark"] .xo-theme-mode-toggle__icon--sun {
	display: block;
}