/*
 * SECTION:  Theme toggle (light / dark button)
 * File:     assets/css/sections/sol-theme-toggle.css
 * Used by:  [sol_theme_toggle] shortcode, also placed inside the header (inc/dark-mode.php)
 * To remove: delete this file and its line in inc/assets.php (handle "sol-theme-toggle").
 */

.sol-toggle {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--sol-line);
	border-radius: 10px;
	background: transparent;
	color: var(--sol-text);
	cursor: pointer;
	transition: background-color var(--sol-fast) ease;
}

.sol-toggle:hover {
	background: var(--sol-surface-alt);
}

.sol-toggle svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The moon shows in light mode, the sun in dark mode. */
.sol-toggle__sun { display: none; }

:root[data-theme="dark"] .sol-toggle__sun  { display: block; }
:root[data-theme="dark"] .sol-toggle__moon { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sol-toggle__sun  { display: block; }
	:root:not([data-theme="light"]) .sol-toggle__moon { display: none; }
}