@mixin _oHeaderTop() {
	.o-header__top-wrapper {
		display: grid;
		grid-template-columns: 1fr min-content 1fr;
		align-items: center;
		gap: $_o-header-column-item-margin-s;
		@include oPrivateGridRespondTo('XL') {
			gap: $_o-header-column-item-margin-l;
		}
	}

	.o-header__top-column--left,
	.o-header__top-column--right {
		display: flex;
		align-items: center;
		white-space: nowrap;
		gap: $_o-header-column-item-margin-s;
		@include oPrivateGridRespondTo('XL') {
			gap: $_o-header-column-item-margin-l;
		}
	}

	.o-header__top-column--left {
		grid-column-start: 1;
		justify-self: left;
	}

	.o-header__top-column--center {
		grid-column-start: 2;
		justify-self: center;
	}

	.o-header__top-column--right {
		grid-column-start: 3;
		justify-self: right;
	}

	.o-header__top-takeover {
		display: none;

		@include oPrivateGridRespondTo('oHeaderL') {
			display: block;

			& ~ * {
				display: none !important; //stylelint-disable-line declaration-no-important
			}
		}
	}
	.o-header__top-link {
		@include _oHeaderLink;
		@include oPrivateTypographySans(-1);
		@include _oHeaderFancyLink();
	}

	.o-header__top-icon-link {
		@include _oHeaderLink;
		display: inline-block;
		text-transform: uppercase;
		font-size: 10px;
		text-align: center;
		height: 40px;
		margin-top: 4px;
		margin-bottom: 4px;

		@include oPrivateGridRespondTo('oHeaderL') {
			margin-top: 30px;
			margin-bottom: 30px;
		}

		@include oPrivateGridRespondTo('M') {
			margin-top: 24px;
			margin-bottom: 24px;
		}

		&:before {
			@include oPrivateIconsContentBaseStyles();
			content: ' ';
			width: #{$_o-header-icon-size-large}px;
			height: #{$_o-header-icon-size-large}px;
		}

		@include oPrivateNormaliseFocusApply() {
			@include oPrivateNormaliseFocusContent();
		}
	}

	.o-header__top-icon-link.o-header__top-icon-link--hide-s,
	.o-header__top-button.o-header__top-button--hide-s,
	.o-header__top-link.o-header__top-link--hide-s {
		@include oPrivateGridRespondTo($until: 'S') {
			display: none;
		}
	}

	.o-header__top-icon-link.o-header__top-icon-link--hide-m,
	.o-header__top-button.o-header__top-button--hide-m,
	.o-header__top-link.o-header__top-link--hide-m {
		@include oPrivateGridRespondTo($until: 'M') {
			display: none;
		}
	}

	.o-header__top-icon-link.o-header__top-icon-link--show-m {
		@include oPrivateGridRespondTo($from: 'M') {
			display: none;
		}
	}

	.o-header__top-icon-link--menu {
		margin-left: -#{$_o-header-icon-size-large * 0.25px}; // remove space built into icon image, -10px size given 40px icon.
	}

	.o-header__top-icon-link--menu {
		&:before {
			// container size (24) is only included for the fallback image.
			// IE8 has a static stylesheet generated for the L breakpoint.
			@include oPrivateIconsContent(
				'hamburger',
				_oHeaderGet('header-icon'),
				$size: null,
				$include-base-styles: false
			);
		}
	}

	.o-header__top-icon-link--search {
		&:before {
			@include oPrivateIconsContent(
				'search',
				_oHeaderGet('header-icon'),
				$size: null,
				$include-base-styles: false
			);
		}

		// when used in tandem with the menu toggle, hide this on smaller screen sizes
		.o-header__top-icon-link--menu + & {
			@include oPrivateGridRespondTo($until: 'M') {
				display: none;
			}
		}
	}

	.o-header__top-myaccount {
		@include _oHeaderLink;
		@include oPrivateTypographySans(0);
		display: flex;
		align-items: center;
		position: relative;
		padding: $_o-header-padding-y 0;

		&:before {
			@include oPrivateIconsContent(
				'user',
				_oHeaderGet('header-icon'),
				$size: 32,
				$include-base-styles: false
			);
			content: ' ';
		}

		&:after {
			content: '';
			position: absolute;
			height: 4px;
			width: calc(100% - 32px);
			right: 0;
			bottom: 8px;
		}

		&:hover:after {
			background-color: _oHeaderGet('link-hover-text');
		}

		span {
			@include oPrivateGridRespondTo($until: 'M') {
				@include oPrivateNormaliseVisuallyHidden;
			}
		}
	}

	.o-header__top-link-label {
		@include oPrivateNormaliseVisuallyHidden;
	}

	.o-header__top-logo {
		@include _oHeaderBrandImage(
			'brand-ft-masthead',
			_oHeaderGet('header-icon'),
			500
		);
		@include _oHeaderLogoSize('XS');

		display: block;
		border: 0;
		margin: 16px auto;
		background-size: 100% 100%; // Edge SVG background clipped when scaled https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4705340/
		background-position: 50%;
		background-repeat: no-repeat;

		@include oPrivateGridRespondTo('S') {
			@include _oHeaderLogoSize('S');
		}

		@include oPrivateGridRespondTo('M') {
			@include _oHeaderLogoSize('M');
			margin-top: 24px;
			margin-bottom: 24px;
		}

		@include oPrivateGridRespondTo('oHeaderL') {
			@include _oHeaderLogoSize('L');
			margin-top: 30px;
			margin-bottom: 30px;
		}
	}

	.o-header__ask-ft-button--top {
		@include _oHeaderAskFtButton();
		@include oPrivateGridRespondTo($until: 'M') {
			display: none;
		}
		margin: 0 10px;
	}
}