@use '@lucca-front/scss/src/commons/utils/reset';
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/text';
@use '@lucca-front/icons/src/icon/exports' as icon;
@use '@lucca-front/scss/src/commons/utils/namespace';
@use '@lucca-front/scss/src/commons/utils/color';
@use '@lucca-front/scss/src/components/chip/exports' as chip;

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: flex;
	box-shadow: 0 0 0 1px var(--components-multiSelect-border-color);
	background-color: var(--components-multiSelect-background);
	border-radius: var(--pr-t-border-radius-input);
	padding: var(--components-multiSelect-padding);
	align-items: flex-end;
	gap: var(--components-multiSelect-gap);
	cursor: pointer;

	&:hover {
		--components-multiSelect-border-color: var(--pr-t-color-input-border-hover);
	}

	&:has(.multipleSelect-displayer-search:focus-visible) {
		@include a11y.focusVisible($offset: 3px);
	}

	@at-root ($atRoot) {
		.multipleSelect-displayer {
			display: flex;
			gap: var(--pr-t-spacings-50);
			flex-wrap: wrap;
			flex: 1;
		}

		.multipleSelect-displayer-chip.chip {
			min-inline-size: 0;

			@include chip.product;
		}

		.multipleSelect-displayer-chip-value {
			max-inline-size: 8.75rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.multipleSelect-displayer-search {
			display: block;
			min-inline-size: 2rem;
			inline-size: auto;
			flex: 1;
			order: 1;
			border: 0;
			padding: 0;
			outline: none;
			color: var(--pr-t-color-input-text);
			font: var(--components-multiSelect-font);
			background-color: transparent;
			cursor: pointer;

			&::placeholder {
				color: var(--components-multiSelect-placeholder);
			}
		}

		.multipleSelect-displayer-label {
			font: var(--components-multiSelect-font);
		}

		.multipleSelect-clear {
			margin-block-end: var(--pr-t-spacings-50);
		}

		.multipleSelect-arrow,
		.multipleSelect-searchIcon {
			@include icon.M;

			color: var(--components-multiSelect-arrow-color);
			transition-property: transform;
			transition-duration: var(--commons-animations-durations-standard);
		}

		.multipleSelect-searchIcon {
			display: none;
		}

		.multipleSelect-pill-displayer-chip {
			@include text.ellipsis;
		}

		.multipleSelect-pill-displayer-label {
			font-weight: var(--pr-t-font-fontWeight-semibold);
		}
	}
}