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

@mixin page {
	--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);
	--components-emptyState-content-heading-font: var(--pr-t-font-heading-1);

	background-image:
		var(--components-emptyState-illustration-foreground-bottom-left),
		var(--components-emptyState-illustration-background-bottom-left),
		var(--components-emptyState-illustration-foreground-top-right),
		var(--components-emptyState-illustration-background-top-right);
	background-repeat: no-repeat;
	background-position:
		bottom left,
		bottom left,
		top left var(--components-emptyState-illustration-top-right-offset-left),
		top left var(--components-emptyState-illustration-top-right-offset-left);

	@include media.max('S') {
		background-position:
			bottom left,
			bottom left,
			top left var(--components-emptyState-illustration-top-right-offset-left-S),
			top left var(--components-emptyState-illustration-top-right-offset-left-S);
		background-size: auto 10.875rem;
	}

	.emptyState-content {
		background-color: var(--components-emptyState-background-color);
		box-shadow: 0 0 8px 4px var(--components-emptyState-background-color);
	}

	.emptyState-content-text {
		padding: 0;
	}

	.emptyState-actions {
		.button {
			@include media.max('XXS') {
				flex-basis: 100%;
			}
		}
	}
}

@mixin headingStyleH($level) {
	--components-emptyState-content-heading-font: var(--pr-t-font-heading-#{$level});
}

@mixin center {
	text-align: center;

	.emptyState-actions {
		justify-content: center;
	}
}

@mixin insideTable {
	--components-emptyState-container-position: sticky;
}

@mixin insideContainer {
	--components-emptyState-container-left: auto;
}

@mixin hasIllustration {
	--components-emptyState-background-color: transparent !important;
	--components-emptyState-illustration-background-bottom-left: none !important;
	--components-emptyState-illustration-foreground-bottom-left: none !important;
	--components-emptyState-illustration-background-top-right: none !important;
	--components-emptyState-illustration-foreground-top-right: none !important;
}

@mixin hasIllustrationNarrow {
	--components-emptyState-container-flexDirection: column;
}

@mixin hasIllustrationImgNarrow {
	--components-emptyState-illustration-display: none;
}