.filter-body button {
	display: block;
	width: 100%;
}

.filter-body button > label {
	display: flex;
	column-gap: 0.5rem;
	place-items: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.filter-body button:hover input[type="checkbox"],
.filter-body button:hover span {
	border-color: black;
	text-decoration: underline;
	text-underline-offset: 0.1rem;
}

.filter-body button input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: white;
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1rem;
	height: 1rem;
	border: 0.1rem solid grey;
	border-radius: 0.15rem;
	display: flex;
	place-items: center;
	cursor: pointer;
}

.filter-body button input[type="checkbox"]::before {
	content: "";
	width: 100%;
	height: 100%;
	background-image: url(../svg/checked.svg);
	transform: scale(0);
	transform-origin: bottom left;
	transition: 120ms transform ease-in-out;
}

.filter-body button input[type="checkbox"]:checked::before {
	transform: scale(1);
	background-size: 100% 100%;
}

.filter-body button input[type="checkbox"]:checked {
	background-size: contain;
	background-color: var(--primary-green-color);
	border: none;
}

.filter-body button input[type="checkbox"]:focus-visible {
	outline: max(2px, 0.15rem) solid currentColor;
	outline-offset: max(2px, 0.15em);
}