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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--pr-t-spacings-200);
	color: var(--pr-t-color-text);

	@at-root ($atRoot) {
		.emptyState-container {
			align-items: center;
			display: flex;
			flex-direction: var(--components-emptyState-container-flexDirection);
			flex-grow: 1;
			justify-content: center;
			max-inline-size: var(--components-emptyState-container-maxWidth);
			inset-inline-start: var(--components-emptyState-container-left);
			padding: 0;
			inline-size: 100%;
			position: var(--components-emptyState-container-position);
			gap: var(--pr-t-spacings-700);
		}

		.emptyState-illustration {
			max-inline-size: min(360px, 100%);
			place-items: center;
			display: var(--components-emptyState-illustration-display);

			&:empty {
				display: none;
			}
		}

		.emptyState-illustration-img {
			max-inline-size: 100%;
			block-size: auto;
		}

		.emptyState-content {
			flex-shrink: 0;
			border-radius: var(--pr-t-border-radius-structure);
			max-inline-size: 100%;
			padding: var(--pr-t-spacings-50);
			inline-size: calc(25rem + var(--pr-t-spacings-50) * 2); // content max width
		}

		.emptyState-content-icon {
			--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));
			--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));

			display: inline-flex;
			margin-block-end: var(--pr-t-spacings-200);
		}

		.emptyState-content-text {
			padding-inline: var(--pr-t-spacings-50);
			display: flex;
			flex-direction: column;
			gap: var(--pr-t-spacings-150);
		}

		.emptyState-content-heading {
			color: var(--pr-t-color-text-heading);
			font: var(--components-emptyState-content-heading-font);
		}

		.emptyState-content-description {
			margin: 0;
		}

		.emptyState-actions {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--pr-t-spacings-200);

			.button {
				margin: 0;
			}

			&:empty {
				display: none;
			}
		}
	}
}