@use '@lucca-front/scss/src/commons/utils/a11y';

@mixin searchable {
	.simpleSelect-field-icon {
		display: none;

		&.mod-search {
			display: inline-flex;
			transform: none;
		}
	}
}

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

	.simpleSelect-field-value {
		color: var(--components-simpleSelect-value-color);
	}
}

@mixin focusedExpanded {
	.simpleSelect-field-value {
		color: var(--components-simpleSelect-placeholder);
	}

	.simpleSelect-field-icon {
		transform: rotate(180deg);
	}
}

@mixin searchFilled {
	.simpleSelect-field-value {
		display: none;
	}
}

@mixin selected {
	.simpleSelect-field-input {
		&::placeholder {
			opacity: 0;
		}
	}
}

@mixin selectedSearchFilled {
	.simpleSelect-field-input {
		&::placeholder {
			opacity: 0;
		}
	}

	.simpleSelect-field-value {
		display: none;
	}
}

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

@mixin disabled {
	--components-simpleSelect-background: var(--pr-t-color-input-background-disabled);
	--components-simpleSelect-placeholder: var(--commons-disabled-placeholder); // Deprecated: no placeholder with disabled state
	--components-simpleSelect-value-color: var(--pr-t-color-input-text-disabled);
	--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon-disabled);

	.simpleSelect-field {
		pointer-events: none;
	}
}