.vid-toggle {
	position: relative;
	width: 48px;
	height: 22px;
	margin: 4px 0;
	border-radius: 12px;
	background-color: var(--vid-text-bg);
	transition: background-color 300ms;
	border: 2px solid var(--vid-text-border);
}
.vid-toggle::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background-color: var(--vid-text-color);
	border-radius: 50%;
	transition: left 300ms ease-out, background-color 300ms ease-out;
}
.vid-toggle[checked=true] {
	background-color: var(--vid-text-act);
}
.vid-toggle[checked=true]::after {
	background-color: var(--vid-text-bg);
	left: 30px;
}
.vid-toggle.disabled { background-color: var(--vid-text-disabled); color: #aaa; }
.vid-toggle-wrapper { display: flex; flex-flow: column nowrap; }
.vid-toggle-wrapper.row { flex-flow: row nowrap; align-items: center; }