@use 'exports' as *;

.multiSelect {
	@layer components {
		@include vars;
		@include component;
	}

	@layer mods {
		&.mod-S {
			@include S;
		}

		&.mod-filterPill {
			@include filterPill;

			&:has(.multipleSelect-displayer-search:focus-visible) {
				@include filterPillFocused;
			}

			.multipleSelect-displayer {
				&:has(.multipleSelect-displayer-search:focus-visible) {
					@include filterPillDisplayerFocused;
				}
			}
		}

		&.is-selected {
			@include selected;
		}

		&:has(.multipleSelect-displayer-search:focus-visible) {
			@include focused;
		}

		&:has(.multipleSelect-displayer-search[aria-invalid='true']) {
			@include invalid;
		}

		&:has(.multipleSelect-displayer-search:disabled) {
			@include disabled;
		}

		&:has([aria-expanded='true']) {
			@include expanded;
		}

		&:not(.mod-noClueIcon) {
			&:has(.multipleSelect-displayer-search:focus-visible),
			&:has([aria-expanded='true']) {
				&:not(:has(.multipleSelect-displayer-search:read-only)) {
					@include searchable;
				}
			}
		}
	}
}

@layer components {
	.multipleSelect-displayer-filter {
		min-inline-size: 0;
		display: flex;
		gap: 0.5ch;

		&:empty {
			display: none;
		}
	}
}