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

.emptyState {
	@layer components {
		@include vars;
		@include component;
	}

	@layer mods {
		&.mod-page {
			@include page;

			@include media.max('XXS') {
				@include headingStyleH(2);
			}
		}

		&.mod-headingStyleH2 {
			@include headingStyleH(2);
		}

		&.mod-center {
			@include center;
		}

		.table &,
		.indexTable &,
		.dataTable & {
			@include insideTable;
		}

		.container & {
			@include insideContainer;
		}

		&:has(.emptyState-illustration:not(:empty)) {
			@include hasIllustration;

			@include media.max('S') {
				@include hasIllustrationNarrow;
			}
		}

		&:has(.emptyState-illustration-img) {
			@include media.max('S') {
				@include hasIllustrationImgNarrow;
			}
		}
	}
}