/**
 * toggle-switch.css
 */

.toggle-switch:not( :last-child ) {
	margin-bottom:  1em;
}

.toggle-switch input[type="checkbox"] {
	display:  none;
}

.toggle-switch input[type="checkbox"] + label {
	position: relative;
	display:  block;
	padding: 0.3em 4em 0.3em 0.5em;
	/* border:  1px solid blue; */
	border-radius: 0.5em;
	overflow: hidden;
	cursor:  pointer;
	background-color: #fff8;
	border:  1px solid #0004;
	text-align: center;
}

.toggle-switch input[type="checkbox"] + label:hover::after {
	filter:  brightness( 1.2 );
}

.toggle-switch input[type="checkbox"] + label::before {
	content: ' ';
	position: absolute;
	width:  5em;
	height:  100%;
	right: 0;
	top: 0;
	transition: 0.3s background-color;
	border-left: 1px solid #0004;
	/* background-image: linear-gradient(to bottom, #0002, transparent 30% ); */
}

.toggle-switch input[type="checkbox"] + label::after {
	content: ' ';
	position: absolute;
	width:  2.5em;
	height:  100%;
	top: 0;
	/* background-color: #444; */
	background-image: linear-gradient( to bottom right, white, #888 25%, #888 75%, #444 100%);
	/* border: 1px solid grey; */
	border-radius: 0.5rem;
	transform: scale( 0.8 );
	transition: 0.3s right, 0.3s filter;
}

.toggle-switch input[type="checkbox"]:not(:checked) + label::before {
	background-color: var( --wpt-bad );
}

.toggle-switch input[type="checkbox"]:checked + label::before {
	background-color: var( --wpt-good );
}

.toggle-switch input[type="checkbox"]:not(:checked) + label::after {
	right:  2.5em;
}

.toggle-switch input[type="checkbox"]:checked + label::after {
	right:  0em;
}