Tiny CSS-only on/off button

contents.html

<div>
	<!-- This can be placed in any structure element, like <div>, <td>, etc... -->
	<input id="my_checkbox1" name="input1" type="checkbox" hidden="">
	<label for="my_checkbox1"><span></span></label>
</div>

style.css

/* On-Off Indicator */
label {
	--color-enabled: #18984a;
	--color-disabled: #7d7d7d;
	width: 2.8em; height: 1.4em;
	margin: 0; padding: 0;
	display: inline-block;
	background-color: var(--color-disabled);
	border-top-left-radius: 25% 50%;
	border-bottom-left-radius: 25% 50%;
	border-top-right-radius: 25% 50%;
	border-bottom-right-radius: 25% 50%;
}
label > span {
	display: block;
	background-color: #fff;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	margin: 0.2em;
	padding: 0;
	float: left;
}

/* Modfify nearby indicator when checkbox is checked */
input[type="checkbox"]:checked ~ label { background-color: var(--color-enabled); }
input[type="checkbox"]:checked ~ label > span { float: right; }