.checkbox-wrapper label {
	display: grid;
	grid-template-columns: 1em auto;
	gap: 0.5em;
	cursor: pointer;
}

.checkbox-wrapper span {
	margin-left: 4px;
}

.checkbox-wrapper input[type="checkbox"] {
	cursor: pointer;

	/* Remove native input styles */
	appearance: none;
	margin: 0;

	/* Mkae it look like a box */
	font: inherit;
	color: var(--font-color);
	width: 16px;
	height: 16px;
	border: 0.12em solid currentcolor;
	border-radius: 5px;

	/* Bump it down slightly so that the label looks centered */
	transform: translateY(1px);

	/* Make the checkmark look nice and centered */
	display: grid;
	place-content: center;
}

.checkbox-wrapper input[type="checkbox"]::before {
	/* Create checkmark (initially invisible) */
	content: "";
	width: 0.65em;
	height: 0.65em;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	transform: scale(0);
	transform-origin: bottom left;
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--accent-primary);

	/* Windows High Contrast Mode */
	background-color: canvastext;
}

.checkbox-wrapper input[type="checkbox"]:checked {
	border-color: var(--accent-primary);
}

.checkbox-wrapper input[type="checkbox"]:checked::before {
	/* Set checkmark to visible */
	transform: scale(1);
	background-color: var(--accent-primary);
}

.checkbox-wrapper input[type="checkbox"]:disabled,
.checkbox-wrapper input[type="checkbox"]:disabled + span {
	cursor: default;
	opacity: 0.3;
}

.indent-5px {
	display: flex;
	margin-top: 5px;
}
