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

@mixin S {
	--components-multiSelect-font: var(--pr-t-font-body-S);
	--components-multiSelect-padding: var(--pr-t-spacings-75);
	--components-multiSelect-gap: var(--pr-t-spacings-75);

	.multipleSelect-arrow {
		@include icon.S;
	}

	.multipleSelect-searchIcon {
		@include icon.S;
	}

	.multipleSelect-clear {
		// :not(.class) is only there to increase specificity when the class isn’t present
		// but the class should be present, and this code is temporary
		&.clear,
		&:not(.clear) {
			@include clear.S;
		}
	}

	.multipleSelect-displayer-chip {
		// :not(.class) is only there to increase specificity when the class isn’t present
		// but the class should be present, and this code is temporary
		&.chip,
		&:not(.chip) {
			@include chip.S;
		}
	}
}

@mixin filterPill {
	flex-direction: column;
	align-items: stretch;
	box-shadow: none;
	padding: 0;
	gap: 0;
	inline-size: 26.5rem;
	max-inline-size: calc(100vw - 2.5rem);

	.multipleSelect-displayer {
		box-shadow: 0 0 0 1px var(--components-multiSelect-border-color);
		border-radius: var(--pr-t-border-radius-input);
		padding: var(--components-multiSelect-padding);
		z-index: 1;
		position: relative;
		max-block-size: min(14rem, 80vh);
		overflow: auto;
	}

	.lu-picker-content {
		animation: none;
		box-shadow: none;
		border-radius: 0;
		background-color: transparent;
		padding: var(--pr-t-spacings-50);
		margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);

		lu-simple-select-default-option.pr-u-ellipsis {
			white-space: normal !important;
		}
	}
}