:root {
	--form-control-color: var(--main-primary-color);
	--form-control-disabled: #959495;
}

.checkbox-container {
	display: grid;
	grid-template-columns: 1.8rem auto;
}

input[type="checkbox"] {
	appearance: none;
	align-self: end;
	font: inherit;
	width: 1.15em;
	height: 1.15em;
	border: 0.0625rem solid var(--main-primary-color);
	border-radius: 20%;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
}

input[type="checkbox"]::before {
	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(--form-control-color);
	background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
	transform: scale(1);
}

input[type="checkbox"]:focus {
	outline: none;
}

input[type="checkbox"]:disabled {
	--form-control-color: var(--form-control-disabled);
	color: var(--form-control-disabled);
	cursor: not-allowed;
}