/*
 * <input type=checkbox class=switch>
 * License: MIT
 */
input.switch {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-block;
	width: 2.4em;
	height: 1.4em;
	margin: -.2em 0;
	box-sizing: content-box;
	padding: 0;
	border: none;
	border-radius: .9em;
	background: rgba(160,160,160,0.7);
	box-shadow: 0 .15em .3em rgba(0,0,0,0.6) inset, 0 -.5px 0 rgba(255,255,255,0.2) inset;
	transition: background-color 250ms ease, box-shadow 250ms ease;
	user-select: none;
	outline: none;
}
input.switch::before {
	content: '';
	display: block;
	position: absolute;
	width: 1em;
	height: .97em;
	left: 0;
	top: 0;
	background: rgba(240,240,240,0.9);
	box-shadow: 0 1px 1px #fff inset, 0 .2em .5em rgba(255,255,255,0.7) inset, 0 -.2em .3em rgba(0,0,0,0.2) inset, 0 .08em .2em rgba(0,0,0,0.5);
	border-radius: 50%;
	transform: translate(20%, 20%);
	transition: transform 250ms ease;
}
input.switch:focus::before {
	background: rgba(255,255,255,0.9);
}
input.switch:checked {
	background-color: var(--bg-checked, var(--bg, rgb(60,130,250)));
}
input.switch:focus-visible {
	box-shadow: 0 .15em .3em rgba(0,0,0,0.6) inset, 0 -.5px 0 rgba(255,255,255,0.2) inset, 0 0 0 2px rgba(255,255,255,0.8), 0 0 0 4px var(--bg-checked, var(--bg, rgb(60,130,250)));
}
input.switch:checked::before {
	transform: translate(120%, 20%);
}



/* Demo Styles */
html {
	font: 100%/1.3 system-ui,sans-serif;
	color: #222;
	transition: background-color 250ms ease, color 250ms ease;
}
html.dark {
	background: #22292f;
	color: #eee;
}
fieldset {
	border: 1px solid rgba(150,150,150,0.5);
	border-radius: 5px;
	padding: 10px;
	display: inline-block;
}
legend {
	opacity: 0.7;
}
label {
	padding: 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	user-select: none;
}
center {
	padding: 1em 0;
}