@mixin _oHeaderSubnav() {
	.o-header__subnav {
		@include oPrivateTypographySans(0);
		background-color: _oHeaderGet('subnav-background');
		border-bottom: 1px solid _oHeaderGet('subnav-border');
	}

	.o-header__subnav--primary {
		background-color: _oHeaderGet('header-background');

		.o-header__subnav-link {
			@include _oHeaderPrimaryLink;
		}
	}

	.o-header__subnav-wrap-outside {
		margin-left: -$_o-header-sub-header-focus-margin;
		margin-right: -$_o-header-sub-header-focus-margin;

		[data-o-header--js] & {
			overflow: hidden;
			// height *needs* setting so we can hide scrollbars.
			// This is the content height of .o-header__subnav-content
			height: $_o-header-subnav-height-base;

			@include oPrivateGridRespondTo('M') {
				height: $_o-header-subnav-height-medium;
			}
		}
	}

	.o-header__subnav-wrap-inside {
		overflow: auto;

		[data-o-header--js] & {
			// inertial scrolling for iOS Safari
			// sass-lint:disable no-vendor-prefixes
			-webkit-overflow-scrolling: touch;
			// sass-lint:enable no-vendor-prefixes
			// working draft
			scroll-behavior: smooth;
			// hide the scrollbar beneath the waves/many wrappers. 30px should be plenty.
			padding-bottom: 30px;
		}
	}

	.o-header__subnav-content {
		// Use flexbox to support right aligned subnav children
		display: flex;
		white-space: nowrap;
		margin-left: $_o-header-sub-header-focus-margin;
		margin-right: $_o-header-sub-header-focus-margin;
	}

	.o-header__subnav-list {
		display: inline-block;
		padding: 0;
		margin: 0;

		// Separators for subnav lists are positioned relative to the subnavs first item
		// to avoid positioning subnavs relative. This is so absolute children of the subnav are
		// positioned relative to their closest positioned ancestor `o-header__container`.
		// An example benefit is o-tooltip support against sub nav items.
		& + &:not(.o-header__subnav-list--right) .o-header__subnav-item {
			&:first-child {
				@include _oHeaderItemSeparatorContent();
			}

			&:first-child:before {
				top: 50%;
				margin-top: -$_o-header-subnav-height-base *
					div($_o-header-item-separator-percentage-height, 2);
				height: $_o-header-subnav-height-base *
					$_o-header-item-separator-percentage-height;

				@include oPrivateGridRespondTo('M') {
					// stylelint-disable-line max-nesting-depth
					margin-top: -$_o-header-subnav-height-medium *
						div($_o-header-item-separator-percentage-height, 2);
					height: $_o-header-subnav-height-medium *
						$_o-header-item-separator-percentage-height;
				}
			}
		}
	}

	.o-header__subnav-item {
		position: relative;
		display: inline-block;
		padding-left: 8px;

		&:first-child {
			padding-left: 0;
		}

		.o-header__subnav-list--children & {
			padding-left: 16px;
		}

		.o-header__subnav-list--children:not(.o-header__subnav-list--right)
			&:first-child {
			// align left side correctly
			padding-left: 0;
		}

		.o-header__subnav-list--breadcrumb & {
			&:before {
				@include oPrivateIconsContent(
					'arrow-right',
					_oHeaderGet('link-highlight-text'),
					$size: $_o-header-icon-size-small
				);
				content: '';
				position: relative;
				top: 0.125em;
				margin-right: 6px;
			}

			&:first-child:before {
				content: none;
			}
		}
	}

	.o-header__subnav-list--children.o-header__subnav-list--right {
		margin-left: auto;
	}

	.o-header__subnav-link {
		@include _oHeaderLink;
		@include _oHeaderFancyLink;
		color: _oHeaderGet('subnav-link');
		display: inline-block;
		padding: 12px 0;

		@include oPrivateGridRespondTo('M') {
			padding: 8px 0;
		}

		.o-header__subnav-list--breadcrumb & {
			color: _oHeaderGet('link-highlight-text');
			text-transform: uppercase;
			font-weight: 600;
		}
	}

	.o-header__subnav-link--right {
		float: right;
		display: none;

		@include oPrivateGridRespondTo('M') {
			display: block;
		}
	}

	.o-header__subnav-button {
		@include oPrivateIconsContent(
			'arrow-left',
			_oHeaderGet('subnav-button-text'),
			$size: null
		);
		background-color: _oHeaderGet('subnav-button-background');
		position: absolute;
		top: 0;
		width: #{$_o-header-icon-size}px;
		height: 100%;
		padding: 0;
		border: 0;
		transition: 0.25s opacity 0.5s;

		&:hover {
			background-color: _oHeaderGet('subnav-button-hover-background');
		}

		&[disabled] {
			opacity: 0;
			pointer-events: none;
		}

		[data-o-header--no-js] & {
			display: none;
		}
	}

	.o-header__subnav-button--left {
		left: 0;
	}

	.o-header__subnav-button--right {
		right: 0;
		// don't download another icon...
		transform: rotate(180deg);
	}

	.o-header__subnav-dropdown-body-scroll-lock {
		position: fixed;
		overflow: hidden;
		width: 100%;
	}
}