/*
 * .knob_switch - a small on/off toggle. Markup:
 *
 *   <label class="knob_switch">
 *     <input type="checkbox" ...>
 *     <span class="knob_slider"></span>
 *   </label>
 *
 * The <input> is transparent and covers the whole control; .knob_slider paints
 * the pill and, through ::before, the sliding knob. Sized in em, so it scales
 * with the surrounding font.
 */
.knob_switch {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	width: 2.6em;
	height: 1em;
	margin: 0 .25em;
	border-radius: .6em;
	border: solid 1px rgba(0, 0, 0, 0.2);
	line-height: 0;
}

.knob_switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.knob_slider {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: #b7bdc4;
	transition: background-color .12s;
}

.knob_slider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -.15em;
	width: 1.25em;
	height: 1.25em;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: #fafafa;
	border: solid 1px rgb(220, 220, 220);
	box-shadow: rgba(0, 0, 0, 0.35) 0 1px 3px 0;
	transition: transform .12s;
}

.knob_switch input:checked + .knob_slider {
	background-color: #4caf50;
}

.knob_switch input:checked + .knob_slider::before {
	transform: translate(1.5em, -50%);
}

.knob_switch input:focus-visible + .knob_slider::before {
	box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.6), rgba(0, 0, 0, 0.35) 0 1px 3px 0;
}

.knob_switch input:disabled + .knob_slider {
	opacity: .55;
	cursor: default;
}
.knob_switch input:disabled {
	cursor: default;
}