@use '@lucca-front/icons/src/commons/utils/icon';

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

@mixin ordered {
	--components-listing-listStyleType: decimal;
}

@mixin icons {
	--components-listing-paddingInlineStart: 0;
	--components-listing-item-display: flex;

	.listing-item-icon {
		&:not([class*='icon-']) {
			&::before {
				--icon-content: var(--components-listing-item-icon-before-content);
			}
		}
	}
}

@mixin checklist {
	--components-listing-paddingInlineStart: 0;
	--components-listing-item-display: flex;

	.listing-item-icon {
		--components-listing-item-icon-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));

		&:not(.icon-signClose) {
			@include icon.generate('sign_confirm');
		}
	}
}

@mixin nested($level: 1) {
	@if $level == 1 {
		--components-listing-listStyleType: circle;
	}

	@if $level == 2 {
		--components-listing-listStyleType: square;
	}
}

@mixin nestedOrdered($level: 1) {
	@if $level == 1 {
		--components-listing-listStyleType: lower-alpha;
	}

	@if $level == 2 {
		--components-listing-listStyleType: lower-roman;
	}
}

@mixin inline {
	--components-listing-paddingInlineStart: 0;
	--components-listing-flexDirection: row;
	--components-listing-item-display: flex;
	--components-listing-flexWrap: wrap;
	--components-listing-item-content-flexWrap: wrap;
	--components-listing-item-content-rowGap: var(--pr-t-spacings-50);
}

@mixin nestedInline {
	&:has(.listing) {
		.listing {
			--components-listing-clipPath: 0;

			@include inline;
		}

		.listing-item {
			--components-listing-item-content-display: flex;
			--components-listing-item-content-columnGap: var(--pr-t-spacings-100);
		}
	}

	&.mod-divider:has(.listing) {
		.listing {
			--components-listing-marginInlineStart: calc(var(--components-listing-inlineFirst) * -1);

			@include divider;
		}

		.listing-item-content {
			--components-listing-item-content-columnGap: var(--pr-t-spacings-200);
		}
	}
}

@mixin hideFirstItems {
	--components-listing-marginInlineStart: calc(var(--components-listing-inlineFirst) * -1);
	--components-listing-clipPath:
		inset(
			calc(var(--pr-t-spacings-50) * -1) calc(var(--pr-t-spacings-50) * -1) calc(var(--pr-t-spacings-50) * -1)
			calc(var(--components-listing-inlineFirst) - var(--pr-t-spacings-50))
		);
}

@mixin divider {
	--components-listing-item-before-content: '';
	--components-listing-inlineFirst: calc(var(--pr-t-spacings-100) + var(--pr-t-spacings-25) - var(--commons-divider-width));
}

@mixin fancy {
	counter-reset: listing;

	--components-listing-listStyleType: '' !important;
	--components-listing-item-number-display: grid;
}