.styledCheckbox {
	display: none;
}

.styledCheckboxLabel {
	position: relative;
	display: inline-block;
	width: 25px;
	height: 25px;
	border: 1px solid black;
	border-radius: 5px;
	cursor: pointer;
	overflow: hidden;
}

.styledCheckboxLabel::before {
	content: '\02713';
	display: inline-flex;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: var(--accent);
	color: white;
	align-items: center;
	justify-content: center;
	font-weight: bolder;
	scale: 0;
	border-radius: 100%;
	left: 0px;
	top: 0px;
	transition: scale ease-in-out 0.2s, border-radius ease-in-out 0.2s;
}

.styledCheckbox:checked ~ .styledCheckboxLabel::before {
	scale: 1;
	translate: 0px 0px;
	border-radius: 0;
}