:root {
	--toggle-button-height: 13px;
	--toggle-button-gap: 2px;
	--toggle-diameter: calc(var(--toggle-button-height) - (2 * var(--toggle-button-gap)));
}

.finsembleToggle input[type="checkbox"] {
	height: 0;
	width: 0;
	visibility: hidden;
}

.finsembleToggle label {
	cursor: pointer;
	text-indent: -9999px;
	width: calc(var(--toggle-button-height) * 2);
	height: var(--toggle-button-height);
	background: var(--core-primary-3);
	display: block;
	border-radius: var(--toggle-button-height);
	position: relative;
	transition: 0.3s;
}

.finsembleToggle label::after {
	content: "";
	position: absolute;
	top: var(--toggle-button-gap);
	left: var(--toggle-button-gap);
	width: var(--toggle-diameter);
	height: var(--toggle-diameter);
	background: var(--font-color);
	border-radius: var(--toggle-diameter);
	transition: 0.3s;
}

.finsembleToggle input:checked + label {
	background: var(--accent-primary-1);
}

.finsembleToggle input:checked + label::after {
	left: calc(100% - var(--toggle-button-gap));
	transform: translateX(-100%);
}

.finsembleToggle input:disabled + label {
	opacity: 0.5;
}
