@use 'sass:map';
@use 'sass:math';

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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	min-block-size: 100vh;
	display: grid;

	@include media.min('L') {
		grid-template-columns: var(--commons-navSide-width) 1fr var(--components-aside-width);
		grid-template-rows: var(--commons-banner-height) 1fr;
		grid-template-areas:
			'banner  banner  banner'
			'navside content aside ';
	}

	@include media.max('L') {
		grid-template-columns: var(--commons-navSide-width) 1fr;
		grid-template-rows: var(--commons-banner-height) 1fr auto;
		grid-template-areas:
			'banner  banner '
			'navside content'
			'navside aside  ';
	}

	@include media.max('S') {
		grid-template-columns: 1fr;
		grid-template-rows: var(--commons-banner-height) auto 1fr auto;
		grid-template-areas:
			'banner '
			'navside'
			'content'
			'aside  ';
	}

	@at-root ($atRoot) {
		.layout-content-container {
			max-inline-size: math.div(map.get(config.$breakpoints, 'M'), 16px) * 1rem;
		}

		.layout-banner {
			grid-area: banner;
			block-size: var(--commons-banner-height);
			background-color: var(--pr-t-elevation-surface-raised);
			position: sticky;
			inset-block-start: 0;
			z-index: 2;
		}

		.layout-content {
			inset-block-start: var(--commons-banner-height);
			grid-area: content;
			position: sticky;
			display: flex;
			flex-direction: column;

			@include media.max('S') {
				position: static;
			}
		}

		.layout-content-headers,
		.layout-content-headers-subheader,
		.layout-content-headers-header {
			background-color: var(--pr-t-elevation-surface-raised);
			inset-block-start: var(--commons-banner-height);
			position: sticky;

			@include media.max('S') {
				position: static;
			}
		}

		.layout-content-headers-header {
			z-index: 1;
		}

		.layout-content-inner {
			flex-grow: 1;
		}

		.layout-content-footer {
			background-color: var(--pr-t-elevation-surface-raised);
			position: sticky;
			inset-block-end: 0;

			@include media.max('S') {
				position: static;
			}
		}

		.layout-navside,
		.layout-aside {
			min-block-size: calc(100vh - var(--commons-banner-height));
			inset-block-start: var(--commons-banner-height);
			display: flex;
			position: sticky;
			flex-direction: column;
			align-self: self-start;

			@include media.max('S') {
				min-block-size: 0;
			}
		}

		.layout-aside {
			grid-area: aside;

			@include media.max('L') {
				min-block-size: 0;
				position: static;
			}
		}

		.layout-navside {
			max-block-size: calc(100vh - var(--commons-banner-height));
			grid-area: navside;
			z-index: 2;
			overflow: auto;
		}

		.layout-navside-content-inner,
		.layout-aside-content-inner {
			flex-grow: 1;
		}

		.layout-navside-footer,
		.layout-aside-footer {
			position: sticky;
			inset-block-end: 0;
			background-color: var(--pr-t-elevation-surface-raised);

			@include media.max('S') {
				margin-block-start: 0;
				position: static;
			}
		}

		.layout-navside-toggle {
			background-color: var(--pr-t-elevation-surface-raised);
			border: 0;
			margin: 0;
			padding: 0;
			inset-block-start: 0;
			position: sticky;
			color: inherit;
			font: inherit;
			cursor: pointer;

			@include media.min('S') {
				display: none;
			}
		}

		.layout-aside-content,
		.layout-navside-content {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
		}

		.layout-navside-content {
			@include media.max('S') {
				.layout-navside-toggle[aria-expanded='false'] ~ & {
					display: none;
				}
			}
		}
	}
}