@mixin light {
	--components-highlightData-background: var(--palettes-50, var(--palettes-product-50));
}

@mixin dark {
	--components-highlightData-background: var(--palettes-100, var(--palettes-product-100));
}

@mixin valueFirst {
	--components-highlightData-grid:
		'value   action'
		'title   action'
		'subtext action';
}

@mixin valueFirstIllustrations {
	--components-highlightData-value-order: -1;
}

@mixin S {
	--components-highlightData-value-font: var(--pr-t-font-highlight-XL);
	--components-highlightData-illustrations-width: 82px;
	--components-highlightData-illustrations-height: 68px;
}

@mixin XS {
	--components-highlightData-value-font: var(--pr-t-font-highlight-L);
	--components-highlightData-illustrations-width: 77px;
	--components-highlightData-illustrations-height: 64px;
}

@mixin illustrations {
	--components-highlightData-display: flex;
	--components-highlightData-alignItem: start;
	--components-highlightData-action-padding: var(--pr-t-spacings-100);

	padding-inline-end: calc(var(--components-highlightData-illustrations-width) + var(--components-highlightData-padding-inline));
}

@mixin narrow {
	--components-highlightData-illustrations-display: none;
}

@mixin nested {
	--components-highlightData-borderRadius: var(--pr-t-border-radius-default);
}