#filters { overflow: visible; }
@media (min-width: 900px) {
	#filters {
		padding: 0 30px;
		
		-webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 20px), transparent);
   		mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 20px), transparent);
	}
}
@media (max-width: 899.99px) {
	#filters {
		margin: 0 -25px;
		padding: 0 25px;
	}
}

/*------------------------------------------------------------------------------------------*/

#filters .filter {
    position: relative;
	display: block; width: auto;
    padding: 15px 30px;
    
	background-color: transparent;
    border-radius: 100px;
    border: solid 1px;
	
    cursor: pointer;
    
    transition:
        padding-right	 .4s ease-out .4s,
        background-color .4s ease-out,
        border-color	 .4s ease-out,
        color			 .4s ease-out;
    
    isolation: isolate;
}
#filters .filter:after {
    content: '';
    position: absolute; top: 50%; right: 25px; transform: translateY(-50%); z-index: 1;
    display: block; width: 24px; height: 24px;
    
    background-color: currentColor;
    
    -webkit-mask-image: url("../../images/icons/spinner.svg");
    mask-image: url("../../images/icons/spinner.svg");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    opacity: 0; transition: opacity .4s ease-out;
}
#filters .filter:hover,
#filters .filter.current {
    background-color: #000;
    border-color: transparent;
    color: #FFF;
}

#filters .filter > .container {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 15px;
}
#filters .filter > .container > .icon {
	height: 20px; width: 20px;
}
#filters .filter > .container > .icon:empty {
	background-image: url("../../images/logo.png");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
#filters .filter > .container > .icon > img {
	height: 100%; width: 100%;
	
	object-fit: contain;
	object-position: center;
}
#filters .filter > .container > .label {
	white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
}
#filters .filter > .container > .count {
	width: 20px; height: 20px;
	
	background-color: #FFF;
	border: solid 1px;
	border-radius: 50%;
	
	text-align: center;
	line-height: 20px;
	font-size: 8px;
	font-weight: 300;
	color: #000;
}

#filters .filter.loading {
    padding-right: 75px;
    transition:
        padding-right	 .4s ease-out,
        background-color .4s ease-out,
        border-color	 .4s ease-out,
        color			 .4s ease-out;
}
#filters .filter.loading:after {
    opacity: 1;
    transition: opacity .4s ease-out .4s;
}