@use 'exports' as *;

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

	@layer mods {
		&:has(.simpleSelect-field-input:focus-visible) {
			@include focused;

			&:has(.simpleSelect-field-input[aria-expanded='true']) {
				@include focusedExpanded;
			}
		}

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

		&:has(.simpleSelect-field-input[aria-invalid='true']) {
			@include invalid;
		}

		&:has(.simpleSelect-field-input:disabled) {
			@include disabled;
		}

		&.mod-S {
			@include S;
		}

		&.mod-XS {
			@include XS;
		}

		&.mod-filterPill {
			@include filterPill;
		}

		&.is-searchFilled {
			@include searchFilled;
		}

		&.is-selected {
			@include selected;

			&.is-searchFilled {
				@include selectedSearchFilled;
			}
		}
	}
}