/// Styles decorative rules for containers
///
///@param {String} $side — left or right rule to be styled
/// @access private
@mixin _oLayoutRule($side: 'left') {
	border-#{$side}: 2px solid oPrivateFoundationGet('o3-color-palette-teal-50');
	padding-#{$side}: oPrivateSpacingByName('s3');
}

/// Base styling for the layout content
/// @access private
@mixin _oLayoutTypography() {
	.o-layout-typography {
		@include oPrivateTypographySans($scale: 1);
		line-height: 1.4;

		p:not(.o-layout__unstyled-element),
		a:not(.o-layout__unstyled-element),
		h1:not(.o-layout__unstyled-element),
		h2:not(.o-layout__unstyled-element),
		h3:not(.o-layout__unstyled-element),
		h4:not(.o-layout__unstyled-element),
		h5:not(.o-layout__unstyled-element),
		h6:not(.o-layout__unstyled-element),
		ul:not(.o-layout__unstyled-element),
		ol:not(.o-layout__unstyled-element) {
			max-width: 60ch;
		}

		p:not(.o-layout__unstyled-element) {
			@include oPrivateTypographyBody();
			@include oPrivateTypographySans($scale: 1);
			line-height: 1.4;
		}

		a:not(.o-layout__unstyled-element) {
			@include oPrivateTypographyLink();
		}

		h1:not(.o-layout__unstyled-element) {
			@include oPrivateTypographyHeading($level: 1);
		}

		h2:not(.o-layout__unstyled-element) {
			@include oPrivateTypographyHeading($level: 2);
		}

		h3:not(.o-layout__unstyled-element) {
			@include oPrivateTypographyHeading($level: 3);
		}

		h4:not(.o-layout__unstyled-element) {
			@include oPrivateTypographyHeading($level: 4);
		}

		h5:not(.o-layout__unstyled-element) {
			@include oPrivateTypographyHeading($level: 5);
		}

		h6:not(.o-layout__unstyled-element) {
			@include oPrivateTypographyHeading($level: 6);
		}

		aside:not(.o-layout__unstyled-element) {
			@include _oLayoutRule('left');
			align-self: flex-start;
		}

		ul:not(.o-layout__unstyled-element) {
			@include oPrivateTypographyList($type: 'unordered');
		}

		ol:not(.o-layout__unstyled-element) {
			@include oPrivateTypographyList($type: 'ordered');
		}

		figure img {
			display: block;
		}

		figcaption:not(.o-layout__unstyled-element) {
			@include oPrivateTypographySans($scale: -1);
			margin-top: oPrivateSpacingByName('s2');
			margin-bottom: 0;
			color: oPrivateFoundationGet('o3-color-use-case-body-text');
		}

		figure,
		table {
			margin: 0 0 oPrivateSpacingByName('s4');
		}
	}
}

/// Navigation
/// Outputs navigation styles
/// @param {boolean} $query-layout - Should the query layout be supported?
/// @access private
@mixin _oLayoutNavigation($query-layout) {
	.o-layout__navigation {
		@include oPrivateGridRespondTo($from: M) {
			position: sticky;
			top: $_o-layout-gutter;
			max-height: 100vh;
			overflow-y: auto;
		}
	}

	.o-layout__navigation li {
		list-style: none;
	}

	.o-layout__navigation ul,
	.o-layout__navigation ol {
		padding: 0;
	}

	.o-layout__navigation > ul,
	.o-layout__navigation > ol {
		border: 0;
		text-align: left;
		margin: 0 0 oPrivateSpacingByIncrement(7); // matches typography body

		@include oPrivateGridRespondTo($from: M) {
			text-align: right;
			margin-top: $_o-layout-gutter;
		}

		li {
			&:not(.o-layout__navigation-title) [aria-current='location'] {
				color: oPrivateFoundationGet('o3-color-palette-teal-30');
				background: oPrivateColorsMix(
					'o3-color-palette-teal',
					'o3-color-palette-white',
					20
				);
			}

			a {
				@include oPrivateTypographySans(1);
				@include oPrivateTypographyLink();
				display: inline-block;
				padding: 0.4em 1em;
				// Where supported `overflow-wrap: anywhere` is better than
				// `word-break: break-word` as it only breaks a word where
				// no otherwise-acceptable break points exist.
				overflow-wrap: anywhere;
				word-break: break-all; // For browsers which do not support break-word, or overflow-wrap: anywhere.
				word-break: break-word; // stylelint-disable-line declaration-block-no-duplicate-properties
				@supports (overflow-wrap: anywhere) {
					word-break: normal;
				}
				border-color: oPrivateFoundationGet('o3-color-palette-teal-50');
				border-left: 2px solid;
				@include oPrivateGridRespondTo($from: M) {
					border-left: 0 solid;
					border-right: 2px solid;
				}
			}

			// Remove standard Origami link decoration styles.
			// This is in its own declaration to ensure correct
			// source order.
			a {
				border-bottom: inherit;
				text-decoration: none;
			}

			&.o-layout__navigation-title a {
				@include oPrivateTypographySans($weight: 'semibold');
				@include oPrivateGridRespondTo($from: M) {
					border: 0;
				}
			}

			// For sub-nav headings, where there is no parent anchor.
			span {
				@include oPrivateTypographySans(1);
				display: inline-block;
				padding: 0.4em 1em;
			}
		}
	}

	// Style sub-nav items.
	.o-layout__navigation ul li:not(.o-layout__navigation-title) ul a,
	.o-layout__navigation ol li:not(.o-layout__navigation-title) ol a {
		border-color: rgba(oPrivateFoundationGet('o3-color-palette-teal-50'), 0.4);
	}

	@if $query-layout {
		// To align the nav with the edge of the query sidebar.
		// Whilst supporting a scrollable navigation.
		.o-layout--query .o-layout__navigation,
		.o-layout--query .o-layout__navigation {
			margin-right: calc(-#{$_o-layout-gutter} - 1px);
		}
		// Undo the negative margin for any element in the nav which is not the nav list.
		// E.g. an input to filter the nav.
		.o-layout--query .o-layout__navigation > *:not(ul):not(ol) {
			margin-right: calc(#{$_o-layout-gutter} + 1px);
		}
	}
}

/// Linked Heading
/// Outputs styles for the linked headings
/// @access private
@mixin _oLayoutLinkedHeading() {
	.o-layout__linked-heading:not(.o-layout__unstyled-element) {
		padding-right: 1.5ch; // for the octothorpe

		// Increased specificity needed to counteract
		// default link styles
		& .o-layout__linked-heading__link,
		& .o-layout__linked-heading__link:visited {
			color: inherit;
			text-decoration: none;
			border-bottom: 0;
			position: relative;
		}

		.o-layout__linked-heading__label {
			color: oPrivateFoundationGet('o3-color-use-case-link-text');
			display: none;
			user-select: none;
			font-weight: normal;
			position: absolute;
			bottom: 0;
			right: -1.5ch; // Keeps the octothorpe in line with the heading if the heading spans a whole grid-column
			padding-left: 0.5ch;
		}

		.o-layout__linked-heading__link:hover .o-layout__linked-heading__label {
			display: inline-block;
		}

		&:target .o-layout__linked-heading__link {
			animation-delay: 0;
			animation-duration: 5s;
			animation-timing-function: $o-pf-visual-effects-timing-fade;
			animation-name: o-layout-linked-heading-fade;
		}
	}

	@keyframes o-layout-linked-heading-fade {
		0% {
			background-color: oPrivateColorsMix(
				'o3-color-palette-teal',
				'o3-color-palette-white',
				15
			);
		}
		100% {
			background-color: transparent;
		}
	}
}