.filter {
	font-size: 1em;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
@media (hover: hover) {
	.filter:hover .filter__typeOption {
		opacity: 1;
		visibility: visible;
	}
}
.filter__contentType {
	height: 2.1875em;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0.3125em;
	border-radius: 3.125em;
	border: 0.125em solid var(--bluePrimary);
	box-shadow: 0 0 0.1875em var(--bluePrimary);
}
.filter__content {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.filter__content {
	margin: 0;
}
.filter__type {
	margin: 0;
}
.filter__btn {
	cursor: pointer;
	border: 0;
	width: 3.125em;
	position: relative;
}
.filter__btn::after {
	content: '';
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100px;
}
.filter__btn svg {
	width: 100%;
	height: 100%;
}
.filter__type {
	height: 1.5625em;
	--BGTypes: rgb(161, 161, 161);
	cursor: pointer;
	font-weight: bold;
	border-radius: 6.25em;
	border: 0;
	padding: 0 0.9375em;
	margin: 0.625em auto;
	background-color: var(--BGTypes);
	transition: transform 0.3s;
}
.filter__option > .filter__type:not(last-of-type) {
	margin-bottom: 0;
}
.filter__type--hidden {
	display: none;
}
@media (hover: hover) {
	.filter__type:hover {
		transform: scale(0.95);
	}
}
.filter__typeOption {
	width: 8.75em;
	height: 12.5em;
	padding-bottom: 0.625em;
	overflow: auto;
	position: absolute;
	top: 2.1875em;
	z-index: 3;
	background-color: var(--grisClaro);
	border-bottom-left-radius: 0.3125em;
	border-bottom-right-radius: 0.3125em;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out;
}
@media (hover: hover) {
	.filter__typeOption:hover {
		visibility: visible;
		opacity: 1;
	}
}
.filter__typeOption--show {
	opacity: 1;
	visibility: visible;
}