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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: var(--components-listboxOption-display);
	flex-direction: column;
	gap: var(--pr-t-spacings-25);
	scroll-margin-block: var(--components-listboxOption-scrollMarginBlock);
	position: var(--components-listboxOption-position);
	inset-block-end: 0;
	z-index: 1;

	&:has(.listboxOption-content-loading.loading) {
		--components-listboxOption-display: none;
	}

	@at-root ($atRoot) {
		.listboxOption-content {
			opacity: var(--components-listboxOption-content-opacity);
			background-color: var(--components-listboxOption-content-backgroundColor);
			color: var(--components-listboxOption-content-color);
			border-radius: var(--pr-t-border-radius-default);
			margin-block-start: var(--components-listboxOption-content-marginBlockStart);
			padding: var(--components-listboxOption-content-padding);
			transition-property: opacity;
			transition-duration: var(--commons-animations-durations-fast);
			display: flex;
			align-items: flex-start;
			gap: var(--pr-t-spacings-100);
			font: var(--components-listboxOption-content-font);
			font-weight: var(--components-listboxOption-content-fontWeight);
			cursor: var(--components-listboxOption-content-cursor);
			position: var(--components-listboxOption-content-position);
			z-index: 2;
			flex-wrap: var(--components-listboxOption-content-flexWrap);
			inset-block-start: var(--components-listboxOption-content-insetBlockStart);
			justify-content: var(--components-listboxOption-content-justifyContent);
			box-shadow: var(--components-listboxOption-content-boxShadow);

			&::before {
				content: var(--components-listboxOption-content-before-content);
				position: absolute;
				inset-block: 0;
				inset-inline-start: calc(var(--pr-t-spacings-50) * -1);
				inline-size: 2px;
				background-color: var(--components-listboxOption-content-before-backgroundColor);
				border-radius: 0 var(--pr-t-border-radius-50) var(--pr-t-border-radius-50) 0;
			}

			&::after {
				content: var(--components-listboxOption-content-after-content);
				position: absolute;
				inset: calc(var(--pr-t-spacings-50) * -1);
				pointer-events: none;
				box-shadow: var(--pr-t-elevation-shadow-overflow);
			}
		}

		.listboxOption-content-checkboxField.checkboxField {
			margin-block-start: var(--pr-t-spacings-25);
			display: var(--components-listboxOption-content-checkboxField-display);
		}

		.listboxOptionWrapper {
			list-style-type: none;
			display: flex;
			flex-direction: column;
			gap: var(--pr-t-spacings-25);
			background-color: var(--palettes-neutral-0);
			position: relative;
			z-index: 1;
			overflow: var(--components-listboxOptionWrapper-overflow);

			&:empty {
				display: none;
			}

			@include reset.list;

			padding: var(--components-listboxOptionWrapper-padding);

			.listboxOptionWrapper {
				--components-listboxOptionWrapper-overflow: visible;
			}
		}
	}
}