@use 'mixins' as *;

@layer layout {
	.l-layout {
		min-height: 100%;
		display: flex;
		flex-direction: column;

		margin: 0;
		padding: 0;

		&--muted {
			background: var(--color-gray-200);
		}

		&__container {
			display: flex;
			width: 100%;
			flex-direction: row;
			justify-content: center;
			flex-grow: 1;

			&:has(> .c-sidebar) {
				@include max-width($breakpoint-lg) {
					justify-content: flex-end;
				}
			}
		}

		&__main {
			position: relative;
			width: 100%;
			transition: width var(--duration-normal) linear;

			@include desktop {
				width: calc(100% - var(--sidebar-width-xl) - var(--toc-width-xl));
			}

			@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
				width: calc(100% - var(--sidebar-width-md));
			}

			@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
				width: calc(100% - var(--sidebar-width-lg) - var(--toc-width-lg));
			}

			&.l-layout__main--no-toc {
				--toc-width-xl: 0px;
				--toc-width-lg: 0px;
				--toc-width-md: 0px;
			}

			.c-sidebar--hidden + & {
				--sidebar-width-xl: 0px;
				--sidebar-width-lg: 0px;
				--sidebar-width-md: 0px;
			}
		}

		&__header {
			width: 100%;
		}
	}
}
