.zeero-check-container {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

.zeero-check-container.disabled {
	color: var(--disabled);
	cursor: default;
}

.zeero-check-container > input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	width: 1.1em;
	height: 1.1em;
	opacity: 0.6;
	border: 0.1em solid var(--text-color);
	border-radius: 0.15em;
	display: grid;
	place-content: center;
	cursor: pointer;
	outline: none;
	transition: opacity 0.3s;
}

.zeero-check-container > input[type="checkbox"]:hover,
.zeero-check-container > input[type="checkbox"]:checked {
	opacity: 1;
}

.zeero-check-container > input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%);
	transform: scale(0);
	transform-origin: center;
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--primary-darker);
}

.zeero-check-container > input[type="checkbox"]:checked {
	border: 0.1em solid var(--primary);
	background-color: var(--primary);
}

.zeero-check-container > input[type="checkbox"]:checked::before {
	transform: scale(1.3);
	border: 0.1em solid var(--primary);
}

.zeero-check-container > input[type="checkbox"]:disabled {
	border: 1px solid var(--disabled);
	background-color: 1px solid var(--dark-grey);
	opacity: 1;
	cursor: default;
}

.zeero-check-container > input[type="checkbox"]:disabled:checked::before {
	box-shadow: inset 1em 1em var(--disabled);
}