@use '@lucca-front/scss/src/commons/utils/namespace';
@use '@lucca-front/icons/src/icon/exports' as icon;

@mixin component($atRoot: namespace.$defaultAtRoot) {
	padding: 0;
	margin: 0;
	padding-inline-start: var(--components-listing-paddingInlineStart);
	margin-inline-start: var(--components-listing-marginInlineStart);
	display: flex;
	flex-direction: var(--components-listing-flexDirection);
	flex-wrap: var(--components-listing-flexWrap);
	row-gap: var(--pr-t-spacings-50);
	column-gap: var(--pr-t-spacings-100);
	list-style-type: var(--components-listing-listStyleType);
	clip-path: var(--components-listing-clipPath);

	@at-root ($atRoot) {
		.listing-item {
			display: var(--components-listing-item-display);
			align-items: flex-start;
			gap: var(--pr-t-spacings-100);
			margin-inline-start: 0;
			position: relative;
			counter-increment: var(--components-listing-item-counterIncrement);

			&::marker {
				line-height: 1;
			}

			&::before {
				content: var(--components-listing-item-before-content);
				border-inline-start: var(--commons-divider-border);
				height: 0.75lh;
				align-self: center;
			}
		}

		.listing-item-number {
			font: var(--pr-t-font-body-S);
			font-weight: var(--pr-t-font-fontWeight-semibold);
			display: var(--components-listing-item-number-display);
			position: absolute;
			inset-inline-end: 100%;
			padding: 0 var(--pr-t-spacings-25);
			min-inline-size: var(--pr-t-spacings-250);
			block-size: var(--pr-t-spacings-250);
			place-items: center;
			background-color: var(--palettes-100, var(--palettes-product-100));
			color: var(--palettes-700, var(--palettes-product-700));
			border-radius: var(--pr-t-border-radius-small);
			margin-inline-end: var(--pr-t-spacings-100);
			margin-block-start: calc(var(--pr-t-spacings-25) / 2);

			&::before {
				content: counter(listing) / '';
			}
		}

		.listing-item-icon {
			inline-size: var(--pr-t-spacings-250);
			aspect-ratio: 1;
			margin-top: var(--pr-t-spacings-25);
			background-color: var(--components-listing-item-icon-backgroundColor);
			color: var(--palettes-700, var(--palettes-neutral-700));
			border-radius: var(--pr-t-border-radius-full);
			display: inline-flex !important;

			@include icon.S;
		}

		.listing-item-content {
			display: var(--components-listing-item-content-display);
			gap: var(--components-listing-item-content-rowGap) var(--components-listing-item-content-columnGap);
			flex-wrap: var(--components-listing-item-content-flexWrap);
		}
	}
}