/* GEPI Light Mode — toggle UI. Customise via the variables. */
.gepi-lm-toggle {
	--gepi-lm-track-off: var(--Gray);
	--gepi-lm-track-on: #141026;
	--gepi-lm-thumb: #fff;
	--gepi-lm-width: 2.5em;
	--gepi-lm-height: 1.4em;
	--gepi-lm-gap: 0.6em;
	
	display: inline-flex;
	align-items: center;
	gap: var(--gepi-lm-gap);
	padding: 0 !important;
	margin: 0;
	background: none;
	border: 0 !important;
	color: var(--gepi-lm-track-off);
	line-height: 1;
	cursor: pointer;
	outline: none !important;
}

.gepi-lm-label {
	font-family: "Noto Sans";
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.88px;
    line-height: 140%;
    text-transform: uppercase;
}

.gepi-lm-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 999px;
}

.gepi-lm-track {
	position: relative;
	flex: none;
	width: var(--gepi-lm-width);
	height: var(--gepi-lm-height);
	border-radius: 999px;
	background: var(--gepi-lm-track-off);
	transition: background 0.2s ease;
}

.gepi-lm-thumb {
	position: absolute;
	top: 0.15em;
	left: 0.15em;
	width: calc(var(--gepi-lm-height) - 0.3em);
	height: calc(var(--gepi-lm-height) - 0.3em);
	border-radius: 50%;
	background: var(--gepi-lm-thumb);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease;
}

html.gepi-light-mode .gepi-lm-track {
	background: var(--gepi-lm-track-on);
}

html.gepi-light-mode .gepi-lm-label {
color: var(--gepi-lm-track-on);
}



html.gepi-light-mode .gepi-lm-thumb {
	transform: translateX(calc(var(--gepi-lm-width) - var(--gepi-lm-height)));
}

@media (prefers-reduced-motion: reduce) {

	.gepi-lm-track,
	.gepi-lm-thumb {
		transition: none;
	}
}