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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: block;
	background-color: var(--components-highlightData-background);
	border-radius: var(--components-highlightData-borderRadius);
	overflow: hidden;
	padding: var(--components-highlightData-padding);
	position: relative;

	@at-root ($atRoot) {
		.highlightData-content {
			@include reset.list($list: 'dl');

			display: var(--components-highlightData-display);
			grid-template-columns: 1fr auto;
			grid-template-areas: var(--components-highlightData-grid);
			align-items: var(--components-highlightData-alignItem);
			flex-direction: column;
			column-gap: var(--components-highlightData-gap);
		}

		.highlightData-content-title {
			grid-area: title;
			font: var(--pr-t-font-body-S);
			color: var(--pr-t-color-text-subtle);
		}

		.highlightData-content-value {
			grid-area: value;
			font: var(--components-highlightData-value-font);
			order: var(--components-highlightData-value-order);
			color: var(--pr-t-color-text-heading);
		}

		.highlightData-content-subText {
			grid-area: subtext;
			font: var(--pr-t-font-body-XS);
			color: var(--pr-t-color-text-subtle);
			margin-block-start: var(--pr-t-spacings-100) !important; // Override list reset
		}

		.highlightData-content-action {
			grid-area: action;
			padding-block-start: var(--components-highlightData-action-padding);

			&:empty {
				display: none;
			}

			.link {
				--commons-text-link-color: var(--palettes-700, var(--palettes-product-700));
				--commons-text-link-hover: var(--palettes-800, var(--palettes-product-800));
			}

			.button {
				@include color.palette('neutral');
			}
		}

		.highlightData-illustrations {
			display: var(--components-highlightData-illustrations-display);
			place-content: center;
			position: absolute;
			inset-block-end: 0;
			inset-inline-end: 0;
		}

		.highlightData-illustrations-back,
		.highlightData-illustrations-front {
			grid-area: 1 / 1;
			block-size: var(--components-highlightData-illustrations-height);
			inline-size: var(--components-highlightData-illustrations-width);
		}
	}
}