.vh-theme-toggle {
	--vh-tt-size: 2.25rem;
	--vh-tt-icon: 1.125rem;
	--vh-tt-radius: 999px;
	--vh-tt-fg: currentColor;
	--vh-tt-bg: transparent;
	--vh-tt-bg-hover: color-mix(in oklab, currentColor 10%, transparent);
	--vh-tt-ring: color-mix(in oklab, currentColor 35%, transparent);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--vh-tt-size);
	height: var(--vh-tt-size);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--vh-tt-radius);
	background: var(--vh-tt-bg);
	color: var(--vh-tt-fg);
	cursor: pointer;
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 160ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vh-theme-toggle.vh-theme-toggle--sm { --vh-tt-size: 1.75rem; --vh-tt-icon: 0.875rem; }
.vh-theme-toggle.vh-theme-toggle--lg { --vh-tt-size: 2.75rem; --vh-tt-icon: 1.375rem; }

.vh-theme-toggle:hover { background: var(--vh-tt-bg-hover); }
.vh-theme-toggle:active { transform: scale(0.94); }
.vh-theme-toggle:focus-visible {
	outline: 2px solid var(--vh-tt-ring);
	outline-offset: 2px;
}

.vh-theme-toggle__icon {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.6) rotate(-20deg);
	transition: opacity 200ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}

.vh-theme-toggle__icon svg {
	width: var(--vh-tt-icon);
	height: var(--vh-tt-icon);
}

.vh-theme-toggle[data-vh-theme-mode="light"]  .vh-theme-toggle__icon--light,
.vh-theme-toggle[data-vh-theme-mode="dark"]   .vh-theme-toggle__icon--dark,
.vh-theme-toggle[data-vh-theme-mode="system"] .vh-theme-toggle__icon--system {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}