.mobile-filter-menu {
	display: flex;
	flex-direction: column;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: white;
	transition: 0.25s;
}

.mobile-filter-menu.closed {
	left: 100vw;
	transition: 0.25s;
}

.mobile-filter-menu-title {
	display: flex;
	flex-direction: row;
	place-items: center;
	place-content: center;
	padding: 1rem;
	border-bottom: 0.1rem solid #c3c2c2;
}

.mobile-filter-menu-title::before {
	content: "";
	flex-basis: 100%;
}

.mobile-filter-menu-title span {
	flex-basis: 100%;
	text-align: center;
	font-weight: 900;
	font-size: 1.2rem;
}

.mobile-filter-menu-title-close-icon-button-wrapper {
	display: flex;
	flex-basis: 100%;
	justify-content: flex-end;
}

.mobile-filter-menu-title-close-icon-button {
	display: flex;
	border: none;
	background: none;
}

.mobile-filter-menu-close-icon {
	width: 1rem;
	height: auto;
}

.mobile-filter-menu ul {
	list-style-type: none;
	padding: 1rem;
	margin: 0;
	overflow: auto;
}

.mobile-filter-menu-body > li {
	background-color: white;
	position: relative;
	box-shadow: inset 0 -1px 0 0 #e0e0e0;
}

.mobile-filter-body li {
	padding-bottom: 0.5rem;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.1s ease;
}

.mobile-filter-body li.hidden {
	padding-bottom: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.75rem);
	transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.1s ease;
}

.mobile-filter-body > button.toggle-checkboxes {
	font-size: 0.75rem;
	width: fit-content;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: 0.25rem;
}

.mobile-filter-menu button:not(footer button) {
	border: none;
	padding: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.mobile-filter-menu .arrow {
	height: 1.5rem;
	width: 1.5rem;
	color: #747a84;
	transition: color 0.2s ease, transform 250ms ease;
}

.mobile-filter-menu .arrow.closed {
	color: black;
	transform: rotate(-180deg);
	transition: color 0.2s ease, transform 250ms ease;
}

.mobile-filter-menu .mobile-filter-title {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
}

.mobile-filter-title > p {
	display: flex;
	align-items: baseline;
	column-gap: 0.2rem;
}

.mobile-filter-title-units {
	color: gray;
	font-size: 0.75rem;
}

.mobile-filter-menu .mobile-filter-body {
	padding-bottom: 1rem;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.1s ease;
}

.mobile-filter-menu .mobile-filter-body.closed {
	pointer-events: none;
	padding-bottom: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.75rem);
	transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.1s ease;
}

.mobile-filter-body label {
	font-size: 0.75rem;
}

.mobile-filter-body ul {
	padding: 0;
	margin: 0;
	overflow: hidden;
}

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

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

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

.mobile-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;
}

.mobile-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;
	/* Windows High Contrast Mode */
	/* background-color: CanvasText; */
}

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

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

	/* Windows High Contrast Mode */
	/* box-shadow: inset 0 0 2rem 0 rgb(36, 137, 107); */
}

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

.mobile-filter-menu footer {
	position: relative;
	margin-top: auto;
	padding: 1rem;
	display: flex;
	flex-direction: row;
	place-content: center;
	background-color: white;
	column-gap: 1rem;
}

.mobile-filter-menu footer button {
	font-family: var(--primary-font-family);
	font-size: 1rem;
	background-color: var(--primary-green-color);
	color: white;
	border: none;
	border-radius: 10px;
	width: 100%;
	white-space: nowrap;
	padding: 0.5rem;
}