/**
 * Structural styles for [brro_aanbod_filter] and [brro_aanbod_filter_active].
 * Themes remain responsible for project-specific colours and typography.
 */

.brro-aanbod-filter {
	margin: 0;
	padding: 0;
	min-inline-size: 0;
	border: 0;
}

.brro-aanbod-filter__legend {
	margin-bottom: 0.5em;
	padding: 0;
}

.brro-aanbod-filter__options {
	display: flex;
	gap: 0.5em 1em;
}

.brro-aanbod-filter--vertical .brro-aanbod-filter__options {
	flex-direction: column;
	align-items: flex-start;
}

.brro-aanbod-filter--horizontal .brro-aanbod-filter__options {
	flex-flow: row wrap;
	align-items: center;
}

.brro-aanbod-filter__option {
	position: relative;
	display: flex;
	align-items: center;
}

.brro-aanbod-filter__option--disabled {
	opacity: 0.35;
	pointer-events: none;
}

.brro-aanbod-filter--inactive {
	opacity: 0.35;
}

.brro-aanbod-filter__input:disabled + .brro-aanbod-filter__label {
	cursor: not-allowed;
}

.brro-aanbod-filter[aria-busy='true'] {
	pointer-events: none;
}

.brro-aanbod-filter-active {
	display: contents;
}

.brro-aanbod-filter-active__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
}

.brro-aanbod-filter-active__remove {
	display: block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.brro-aanbod-filter-active__remove svg {
	display: block;
	width: 100%;
	height: 100%;
}