/* Site Mode Switcher - toggle button styles (colors come from CSS variables) */

html body button.sms-toggle {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sms-size, 44px);
	height: var(--sms-size, 44px);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	line-height: 1;
	cursor: pointer;
	background: var(--sms-tg-bg, #111827);
	color: var(--sms-tg-fg, #fff);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
	transition: transform .2s ease, box-shadow .2s ease;
}
html body button.sms-toggle:hover { transform: scale(1.06); }
/* Same colors in every state, so the icon never disappears on hover / click / focus */
html body button.sms-toggle,
html body button.sms-toggle:hover,
html body button.sms-toggle:focus,
html body button.sms-toggle:focus-visible,
html body button.sms-toggle:active {
	background: var(--sms-tg-bg, #111827) !important;
	color: var(--sms-tg-fg, #fff) !important;
	opacity: 1 !important;
}
html body button.sms-toggle .sms-icon,
html body button.sms-toggle .sms-icon svg,
html body button.sms-toggle .sms-icon svg * { color: var(--sms-tg-fg, #fff); stroke: currentColor; }
html body button.sms-toggle .sms-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
html body button.sms-toggle:focus-visible { outline: 3px solid var(--sms-tg-fg, #fff); outline-offset: 2px; }

.sms-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--sms-size, 44px) * .5);
	height: calc(var(--sms-size, 44px) * .5);
}
.sms-icon svg, .sms-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---- Icon style: show the icon of the mode you would switch TO ---- */
.sms-style-icon .sms-icon-light { display: none; }
html[data-theme="dark"] .sms-style-icon .sms-icon-dark { display: none; }
html[data-theme="dark"] .sms-style-icon .sms-icon-light { display: inline-flex; }

/* ---- Pill style: sliding knob ---- */
html body button.sms-toggle.sms-style-pill {
	width: calc(var(--sms-size, 44px) * 1.9);
	border-radius: 999px;
	justify-content: space-between;
	padding: 0 calc(var(--sms-size, 44px) * .14);
}
.sms-style-pill .sms-icon { position: relative; z-index: 2; color: var(--sms-tg-fg, #fff); transition: color .25s ease; }
.sms-style-pill .sms-knob {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 0;
	width: calc(var(--sms-size, 44px) * .78);
	height: calc(var(--sms-size, 44px) * .78);
	margin-top: calc(var(--sms-size, 44px) * -.39);
	border-radius: 50%;
	background: var(--sms-tg-fg, #fff);
	transition: transform .25s ease;
}
html[data-theme="dark"] .sms-style-pill .sms-knob { transform: translateX(calc(var(--sms-size, 44px) * 1.12)); }
html:not([data-theme="dark"]) .sms-style-pill .sms-icon-light,
html[data-theme="dark"] .sms-style-pill .sms-icon-dark { color: var(--sms-tg-bg, #111827); }

/* ---- Floating placement ---- */
html body button.sms-toggle.sms-floating { position: fixed; z-index: 99999; }
html body button.sms-toggle.sms-pos-bottom-right { right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
html body button.sms-toggle.sms-pos-bottom-left  { left: 20px;  bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
html body button.sms-toggle.sms-pos-top-right    { right: 20px; top: calc(20px + env(safe-area-inset-top, 0px)); }
html body button.sms-toggle.sms-pos-top-left     { left: 20px;  top: calc(20px + env(safe-area-inset-top, 0px)); }

/* ---- Inside a menu ---- */
.sms-menu-item { display: flex; align-items: center; list-style: none; }
.sms-menu-item .sms-toggle { --sms-size: 34px; box-shadow: none; }

/* ---- Smooth colour transition while switching ---- */
html.sms-animating,
html.sms-animating *:not(.sms-knob):not(.sms-toggle),
html.sms-animating *:not(.sms-knob):not(.sms-toggle)::before,
html.sms-animating *:not(.sms-knob):not(.sms-toggle)::after {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, stroke .3s ease !important;
}

@media (prefers-reduced-motion: reduce) {
	html body button.sms-toggle, .sms-knob { transition: none !important; }
	html.sms-animating * { transition: none !important; }
}

/* ---- Menu item: add a Custom Link with the CSS class "site-mode-toggle" ---- */
.site-mode-toggle > a::before { content: "\25D0"; margin-right: .4em; }