@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/components/chip/exports' as chip;

@mixin focused {
	@include a11y.focusVisible($offset: 3px);
}

@mixin invalid {
	--components-multiSelect-border-color: var(--pr-t-color-input-border-critical);
	--components-multiSelect-background: var(--pr-t-color-input-background-critical);
	--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical);
}

@mixin disabled {
	--components-multiSelect-background: var(--commons-disabled-background);
	--components-multiSelect-placeholder: var(--commons-disabled-placeholder);
	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);

	pointer-events: none;

	.multipleSelect-displayer-chip {
		@include chip.disabled;
	}
}

@mixin expanded {
	.multipleSelect-arrow {
		transform: rotate(180deg);
	}
}

@mixin searchable {
	.multipleSelect-arrow {
		display: none;
	}

	.multipleSelect-searchIcon {
		display: inline-flex;
		transform: none;
	}
}

@mixin selected {
	.multipleSelect-displayer-search {
		&[readonly],
		&:not(:focus) {
			@include a11y.mask;
		}
	}
}

@mixin filterPillFocused {
	outline: none;
}

@mixin filterPillDisplayerFocused {
	@include a11y.focusVisible($offset: 3px);
}