/// Layout Base
/// Outputs responsive base grid
/// @access private
@mixin _oLayoutBase() {
	html,
	body {
		margin: 0;
	}

	body {
		// Apply to the body rather than o-layout to avoid
		// obscuring the hero element, which makes use of a
		// negative z-index at the time of writing.
		background-color: oPrivateFoundationGet('o3-color-use-case-page-background');
	}

	.o-layout {
		$column-gap-count: 2;
		position: relative;
		/*! autoprefixer: ignore next */
		// o-layout does not cater for older `-ms-` versions of the grid specification.
		display: grid;
		// make the main area have a max width equal to the o-layout container
		// size, accounting for grid gaps
		/*! autoprefixer: ignore next */
		grid-template-columns: minmax(0, 1fr) minmax(
				0,
				calc(
					#{$_o-layout-container-max-width} - #{$column-gap-count * $_o-layout-gutter}
				)
			) minmax(0, 1fr);
		/*! autoprefixer: ignore next */
		grid-template-rows: auto 1fr auto;
		/*! autoprefixer: ignore next */
		grid-column-gap: $_o-layout-gutter;
		/*! autoprefixer: ignore next */
		grid-template-areas:
			'header header header'
			'. main .'
			'footer footer footer';
		box-sizing: border-box;
		min-height: 100vh;
		// create a break if an entire word cannot be placed on its own line without overflowing
		overflow-wrap: break-word;
	}

	.o-layout-skip-link {
		@include oPrivateTypographySans($scale: 1);
		z-index: 999;
		position: absolute;
		left: oPrivateSpacingByName('s2');
		padding: oPrivateSpacingByName('s2') oPrivateSpacingByName('s4');
		background-color: oPrivateFoundationGet('o3-color-palette-oxford');
		color: oPrivateFoundationGet('o3-color-palette-white');
		text-decoration: none;
		transform: translateY(-120%);
		@media (prefers-reduced-motion: no-preference) {
			transition: transform 300ms ease-in;
		}

		&:focus {
			transform: translateY(0);
		}
	}
}

/// Layout Bleed
/// @access private
@mixin _oLayoutBleed() {
	.o-layout--bleed {
		max-width: none;
		grid-template-areas:
			'header'
			'main'
			'footer';
		grid-template-columns: minmax(0, 1fr);
	}
}

/// Grid for a landing page layout (e.g. homepage).
/// @access private
@mixin _oLayoutLandingGrid() {
	.o-layout.o-layout--landing {
		$column-gap-count: 2;
		grid-template-areas:
			'header header header'
			'. hero .'
			'. main .'
			'footer footer footer';
		grid-template-rows: auto auto 1fr auto;
		// make the main area have a max width equal to the o-layout container
		// size, accounting for grid gaps
		grid-template-columns: minmax(0, 1fr) minmax(
				0,
				calc(
					#{$_o-layout-container-max-width} - #{$column-gap-count * $_o-layout-gutter}
				)
			) minmax(0, 1fr);
	}
}

/// Grid for document layout.
/// @access private
@mixin _oLayoutDocsGrid() {
	.o-layout.o-layout--docs {
		grid-template-rows: auto auto 1fr auto;
		grid-template-columns: 0 minmax(0, 1fr) 0; // create a grid gap the header and footer can span
		grid-template-areas:
			'header header header'
			'. sidebar .'
			'. main .'
			'footer footer footer';

		@include oPrivateGridRespondTo($from: M) {
			$column-gap-count: 3;
			grid-template-areas:
				'header header header header'
				'. sidebar main .'
				'footer footer footer footer';
			// make the main and sidebar area have a max width equal to the
			// o-layout container size, accounting for grid gaps
			grid-template-columns: minmax(0, 1fr) $_o-layout-sidebar-width minmax(
					0,
					calc(
						#{$_o-layout-container-max-width} - #{$_o-layout-sidebar-width} - #{$column-gap-count *
							$_o-layout-gutter}
					)
				) minmax(0, 1fr);
			grid-template-rows: auto 1fr auto;
		}
	}

	.o-layout.o-layout--docs > .o-layout__main {
		> aside {
			margin-bottom: oPrivateSpacingByName('s6');
		}
		@include oPrivateGridRespondTo($until: M) {
			margin-top: 0;
		}
		@include oPrivateGridRespondTo($from: L) {
			> * {
				box-sizing: border-box;
				max-width: calc(
					100% - #{$_o-layout-sidebar-width} - #{$_o-layout-gutter}
				);
				float: left;
				clear: left;
			}
			> pre {
				width: 100%;
				margin: 0 0 oPrivateSpacingByName('s6');
			}
			> aside {
				box-sizing: border-box;
				width: $_o-layout-sidebar-width;
				margin-bottom: oPrivateSpacingByName('m12');
				float: right;
				clear: right;
				:last-child {
					margin-bottom: 0;
				}
			}
		}

		> table:not(.o-layout__main__single-span) {
			max-width: none;
			float: none;
		}

		.o-layout__rule-left {
			@include _oLayoutRule('left');
		}

		.o-layout__rule-right {
			@include _oLayoutRule('right');
		}

		.o-layout__main__full-span {
			display: block;
			max-width: none;
			float: none;
		}
	}
}

/// Grid for query layout.
/// @access private
@mixin _oLayoutQueryGrid() {
	// make the main and optional sidebar areas have a max width equal to the
	// o-layout container size my having two extra columns for margin
	$margin-grid-size: calc((100% - #{$_o-layout-container-max-width}) / 2);
	.o-layout.o-layout--query {
		grid-template-rows: auto auto auto 1fr auto auto;
		grid-template-columns: $margin-grid-size minmax(0, 1fr) $margin-grid-size;
		grid-template-areas:
			'header header header'
			'. heading .'
			'. query-sidebar .'
			'. main .'
			'. aside-sidebar .'
			'footer footer footer';

		@include oPrivateGridRespondTo($from: M) {
			grid-template-rows: auto auto 1fr auto;
			grid-template-columns: $margin-grid-size $_o-layout-sidebar-width minmax(
					0,
					1fr
				) $margin-grid-size;
			grid-template-areas:
				'header header header header'
				'. query-sidebar heading .'
				'. query-sidebar main .'
				'. query-sidebar aside-sidebar .'
				'footer footer footer footer';
		}

		@include oPrivateGridRespondTo($from: L) {
			grid-template-areas:
				'header header header header header'
				'. query-sidebar heading aside-sidebar .'
				'. query-sidebar main aside-sidebar .'
				'footer footer footer footer footer';
			grid-template-rows: auto auto 1fr auto;
			// fit-content makes the aside collapse with no content, so the aside bar can be optional
			grid-template-columns: $margin-grid-size $_o-layout-sidebar-width minmax(
					0,
					1fr
				) fit-content($_o-layout-sidebar-width) $margin-grid-size;
		}

		.o-layout__main {
			margin-top: 0;
		}

		.o-layout__heading {
			margin-top: $_o-layout-gutter;
		}

		.o-layout__query-sidebar {
			margin: 0;
			@include oPrivateGridRespondTo($from: M) {
				border-right: 1px solid oPrivateFoundationGet('o3-color-palette-slate-white-15');
				padding-right: $_o-layout-gutter;
				margin: $_o-layout-gutter 0 oPrivateSpacingByName('s4');
			}
		}

		.o-layout__aside-sidebar {
			@include oPrivateGridRespondTo($from: L) {
				width: $_o-layout-sidebar-width; // So the sidebar can be deleted, the query area fits to content width.
				margin: $_o-layout-gutter 0;
				padding-left: $_o-layout-gutter;
				border-left: 1px solid oPrivateFoundationGet('o3-color-palette-slate-white-15');
			}
		}
	}
}