@layer components {
	.element-filter {
		
		--filter-width: var(--size-56);
		--filter-input-dropdown-max-height: var(--size-80);
		--filter-input-border-color: var(--border-neutral);
		--filter-input-bg: var(--background-neutral);
		--filter-input-count-size: var(--size-6);
		--filter-input-z: 100;
		--filter-input-modal-z: 2000;

		.col-filter {
			display: flex;
			flex-direction: column;
			gap: var(--gap-md);		

			@media (min-width: 1280px) {
				gap: var(--gap-xl);		
			}
		}
	}

	.filter-title {
		font-size: var(--font-size-lead);
		width: 100%;
	}

	.filter-group {
		display: flex;
		flex-direction: column;
		gap: var(--gap-sm);
		width: 100%;
	}

	.filter-group-label {
		margin: 0;
	}
}