@use '@lucca-front/icons/src/icon/exports' as icon;
@use '@lucca-front/scss/src/components/clear/exports' as clear;

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

	.simpleSelect-field-icon {
		.lucca-icon {
			@include icon.S;
		}
	}

	.simpleSelect-field-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;
		}
	}
}

@mixin XS {
	--components-simpleSelect-font: var(--pr-t-font-body-XS);
	--components-simpleSelect-padding: var(--pr-t-spacings-50);
	--components-simpleSelect-gap: var(--pr-t-spacings-50);

	.simpleSelect-field-icon {
		.lucca-icon {
			@include icon.XS;
		}
	}

	.simpleSelect-field-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;
		}
	}
}

@mixin filterPill {
	inline-size: 26.5rem;
	max-inline-size: calc(100vw - 2.5rem);

	.simpleSelect-field {
		position: relative;
		z-index: 1;
	}

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

	.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);
	}
}