@use "@gloria/layout/_mixins.scss" as *;

@layer doc {
	:root {
		--snippet-max-width: 1520px;
		--snippet-outside-margin: 48px;
	}

	.doc.live-snippet {
		&--empty {
			display: none;
		}

		&--normal:not(:has(.no-transform)) {
			position: relative;
			margin: var(--spacing-7) 0 var(--spacing-7) calc(var(--snippet-outside-margin) * -1);
			width: calc(100% + var(--snippet-outside-margin) * 2);
			min-height: 95px;

			@include mobile {
				width: 100%;
				margin-left: auto;
				margin-right: auto;
			}

			&:has(.c-banner) {
				z-index: var(--z-index-live-snippet);
			}
		}

		&--wide {
			width: 100%;

			--snippet-gap: var(--spacing-12);

			/* Based on `l-container--thin` class properties. */
			--half-container-gap: calc( ((100vw - min(100vw, 960px)) / 2) + var(--spacing-20));

			@include desktop {
				width: calc(100vw - var(--sidebar-width-xl) - var(--toc-width-xl) - var(--snippet-gap));
				margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-width-xl) + var(--snippet-gap) / 2);

				.live-snippet__loader {
					width: calc(100vw - var(--sidebar-width-xl) - var(--toc-width-xl) - var(--snippet-gap));
				}
			}

			@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
				width: calc(100% + var(--sidebar-width-md)/2);
				margin-left: calc(-1 * var(--sidebar-width-md)/2 + var(--spacing-16));

				.live-snippet__loader {
					width: calc(100vw - var(--sidebar-width-md) - var(--snippet-gap));
				}
			}

			@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
				width: calc(100vw - var(--sidebar-width-lg) - var(--toc-width-lg) - var(--snippet-gap));
				margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-width-lg) + var(--snippet-gap) / 2);

				.live-snippet__loader {
					width: calc(100vw - var(--sidebar-width-lg) - var(--toc-width-lg) - var(--snippet-gap));
				}
			}

			> *:not(.live-snippet__loader) {
				@include desktop {
					margin-left: auto !important;
					margin-right: auto !important;
					max-width: var(--snippet-max-width);
				}
			}

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

				@include min-width(2200px) {
					position: relative;
					left: calc(-1 * var(--sidebar-width-xl)/2);
				}
			}

			.c-sidebar--collapsed + .l-layout__main & {
				/* TODO: margin-left calculations */
				/* Should we change the editor width while the sidebar is collapsed? */
			}

			.c-sidebar--collapsed + .l-layout__main.l-layout__main--no-toc & {
				--sidebar-collapsed-calculation: calc(var(--sidebar-width) / 2);

				@include desktop {
					--sidebar-width: var(--sidebar-width-xl);
					margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-collapsed-calculation) + var(--snippet-gap) / 2);
				}

				@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
					--sidebar-width: var(--sidebar-width-md);
					margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-collapsed-calculation) + var(--snippet-gap) / 2);
				}

				@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
					--sidebar-width: var(--sidebar-width-lg);
					margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-collapsed-calculation) + var(--snippet-gap) / 2);
				}

				@include min-width(2200px) {
					margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-width-xl) + var(--snippet-gap) / 2);
				}
			}
		}

		&:has(style):not(:has(p, div, .c-banner)) {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border-width: 0;
		}
	}
}
