/* Dimt tijdens het wisselen als visuele feedback. */
.nova-filter-results {
	transition: opacity 300ms ease-in-out;
}

.nova-filter-results.is-loading {
	opacity: .4;
	pointer-events: none;
}

.nova-filter-select {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: max(2.75rem, calc(2.75 * var(--su)));
	padding: 0 max(3.125rem, calc(3.125 * var(--su))) 0 max(1.5rem, calc(1.5 * var(--su)));
	gap: max(1rem, calc(1 * var(--su)));
	border: 1px solid var(--primary-10);
	border-radius: 999px;
	background-color: var(--white-100);
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='24' y='1.04907e-06' width='24' height='24' rx='12' transform='rotate(90 24 1.04907e-06)' fill='%23F5F5F6'/%3E%3Cmask id='mask0_521_18927' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='4' width='16' height='16'%3E%3Crect x='19.5' y='4.5' width='15' height='15' transform='rotate(90 19.5 4.5)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_521_18927)'%3E%3Cpath d='M12.0016 13.5293L14.8766 10.6543L15.5352 11.3129L12.0016 14.8465L8.46797 11.3129L9.12656 10.6543L12.0016 13.5293Z' fill='%232F334C'/%3E%3C/g%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: calc(100% - .625rem) center;
	background-size: max(1.25rem, calc(1.5 * var(--su)));
	color: var(--primary-100);
	cursor: pointer;
}

.nova-filter-select:focus-visible, .nova-filter-select:hover {
	border-color: var(--primary-60);
	outline: none;
}

@media screen and (max-width: 400px) {

	.nova-filter-select {
		width: 100%;
	}
	
}