index.css

:root {
	--checkbox-color: #000;
	--checkbox-spacing: 1.5rem;
	--indicator-color-checked: #2c7cb0;
	--indicator-color: #eee;
	--indicator-size: 1rem;
}

.checkbox {
	color: var(--checkbox-color);
	cursor: pointer;
	display: inline-block;
	padding-left: var(--checkbox-spacing);
	position: relative;
}

.checkbox input {
	opacity: 0;
	position: absolute;
	z-index: -1;
}

.checkbox-indicator {
	background-color: var(--indicator-color);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 50% 50%;
	color: var(--indicator-color);
	display: block;
	height: var(--indicator-size);
	left: 0;
	pointer-events: none;
	position: absolute;
	user-select: none;
	width: var(--indicator-size);
}

.checkbox input:checked ~ .checkbox-indicator {
	background-color: var(--indicator-color-checked);
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=');
}