/* Filters
==================================== */
#filters{
	width: fit-content;
	width: -moz-fit-content;
	max-width: 100vw;
	padding: var(--margin-sides);
	align-items: flex-end;
	justify-content: space-between;
	column-gap: var(--gap-large);
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	overflow-x: scroll;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
@media (min-width: 835px){
	.mobile #filters{
		padding-top: var(--gap-large);
	}
	#filters{
		display: grid !important;
		background-color: var(--color-bg);
	}
	#filters-trigger_wrapper{
		display: none;
	}
}
@media (max-width: 834px){
	#filters{
		padding: var(--margin-sides) var(--margin-sides) 0;
		display: grid;
	}
	#filters-trigger{
		width: fit-content;
		width: -moz-fit-content;
		margin: var(--margin-sides) var(--margin-sides) 0;
		-webkit-user-select: none;
			-moz-user-select: none;
			 -ms-user-select: none;
				  user-select: none;
		cursor: pointer;
	}
}
@media (max-width: 600px){
	#filters{
		column-gap: var(--gap-cols);
	}
}

/* Filters */
.module-filters{
	display: grid;
	grid-auto-rows: min-content;
	row-gap: 3px;
	white-space: nowrap;
	text-transform: capitalize;
}
.module-filters_content{
	display: grid;
	grid-gap: 1px var(--gap-small);
}
.module-filters_content.has-more-than-ten{
	display: grid;
	grid-template-rows: repeat(10, 1fr);
	grid-auto-flow: column;
}
.filter{
	width: fit-content;
	width: -moz-fit-content;
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
	-webkit-transition: margin-left var(--speed) var(--ease), padding-right var(--speed) var(--ease);
		  -o-transition: margin-left var(--speed) var(--ease), padding-right var(--speed) var(--ease);
			  transition: margin-left var(--speed) var(--ease), padding-right var(--speed) var(--ease);
	cursor: pointer;
}
.filter:not(.active){
	margin-left: var(--gap-cols);
}
.filter.active{
	padding-right: var(--gap-cols);
}
.filter-all.active{
	pointer-events: none;
	cursor: default;
}
