@use 'exports' as *;

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

	@layer mods {
		&:not(.is-filled) {
			@include notFilled;
		}

		&:hover {
			@include hover;
		}

		&:active {
			@include active;
		}

		&:has(.filterPill-label:focus-visible),
		&:has(.filterPill-value:focus-visible) {
			@include focusVisible;
		}

		&[aria-expanded='true'] {
			@include opened;
		}

		&.is-filled {
			@include filled;

			&:hover {
				@include filledHover;
			}

			&:active {
				@include filledActive;
			}

			&:has(~ .filterPill_clear) {
				@include filledClearable;
			}
		}

		&.mod-checkbox {
			@include checkbox;

			&:has(.filterPill-checkbox-input:focus-visible) {
				@include focusVisible;
			}

			&[aria-pressed='true'],
			&:has(.filterPill-checkbox-input:checked) {
				@include checkboxChecked;

				&:hover {
					@include filledHover;
				}

				&:active {
					@include filledActive;
				}
			}

			&[disabled],
			&:has(.filterPill-checkbox-input:disabled) {
				@include checkboxDisabled;

				&[aria-pressed='true'],
				&:has(.filterPill-checkbox-input:checked) {
					@include checkboxCheckedDisabled;
				}
			}
		}

		&.mod-button {
			@include button;
		}

		&[disabled] {
			@include disabled;
		}
	}
}

.filterPillWrapper {
	@layer components {
		@include varsWrapper;
	}

	@layer mods {
		&.is-hidden {
			@include hidden;
		}
	}
}