@mixin _oHeaderDrawer() {
	// added to the document element, see n-ui/layout
	.o-header__drawer {
		font-family: #{oPrivateFoundationGet('o3-font-family-metric')};
		background-color: _oHeaderGet('drawer-background');
		box-sizing: content-box;
		transition: transform 0.5s cubic-bezier(1, 0, 0.5, 1.2);

		&[data-o-header-drawer--js] {
			@include oPrivateVisualEffectsShadowContent('low');
			display: none;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			z-index: $_o-header-drawer-z-index;
			width: 100%;
			border-right: 1px solid _oHeaderGet('drawer-border');
			transform: translate3d(-100%, 0, 0);

			// this is literally the specification example for will-change
			will-change: transform;

			// because the transition is slightly bouncy it will reveal some of the background
			border-left: 30px solid transparent;
			margin-left: -30px;

			@include oPrivateGridRespondTo('M') {
				width: $_o-header-drawer-width;
			}

			&.o-header__drawer--open {
				transform: translate3d(0, 0, 0);
			}
		}
	}

	.o-header__drawer-inner {
		[data-o-header-drawer--js] & {
			height: 100%;
			overflow-y: auto;
			// intertial scrolling for iOS Safari
			-webkit-overflow-scrolling: touch;
			// working draft
			scroll-behavior: smooth;

			scrollbar-color: oPrivateFoundationGet('o3-color-palette-black-30')
				transparent;

			// (╯°□°）╯︵ ┻━┻
			&::-webkit-scrollbar {
				width: 12px;
			}

			&::-webkit-scrollbar-thumb {
				background: oPrivateFoundationGet('o3-color-palette-black-30');
				// you can't set the dimensions so use a border as a margin...
				background-clip: content-box;
				border: 4px solid transparent;
			}

			overscroll-behavior: none;
		}
	}

	//
	// Tools
	//
	.o-header:has(.o-header__anon) ~ .o-header__drawer .o-header__drawer-tools {
		@include oPrivateGridRespondTo($until: 'M') {
			padding: ($_o-header-drawer-padding-y * 2.5) 0 0
				$_o-header-drawer-padding-x;
		}
	}
	.o-header__drawer-tools {
		overflow: hidden;
		padding: $_o-header-drawer-padding-y 0 0 $_o-header-drawer-padding-x;
		background-color: _oHeaderGet('drawer-tools-background');
		color: _oHeaderGet('drawer-tools-text');
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.o-header__drawer-edition-switcher {
			display: flex;

			.o-header__drawer-menu-link {
				padding-left: 12px;
				text-decoration: underline;
				text-decoration-color: oPrivateFoundationGet(
					'o3-color-palette-black-80'
				);
			}

			.o-header__drawer-menu-item {
				padding-top: 12px;
				padding-right: 12px;
				font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
				font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
				line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
				font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
			}

			.o-header__drawer-current-edition {
				font-family: oPrivateFoundationGet(
					'o3-type-body-highlight-font-family'
				);
				font-size: oPrivateFoundationGet('o3-type-body-highlight-font-size');
				line-height: oPrivateFoundationGet(
					'o3-type-body-highlight-line-height'
				);
				font-weight: oPrivateFoundationGet(
					'o3-type-body-highlight-font-weight'
				);
				color: oPrivateFoundationGet('o3-color-palette-black-60');
			}
		}
	}

	.o-header__drawer-tools-close {
		// dividing by 1px removes the unit
		@include oPrivateIconsContent(
			'cross',
			_oHeaderGet('drawer-tools-close'),
			$size: $_o-header-icon-size-large
		);
		box-sizing: border-box;
		border: 0;
		opacity: 0.75;
		margin-left: -10px; // this is to align icon because icon background image have padding

		&:hover,
		&:focus {
			opacity: 1;
		}

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

	//
	// Actions
	//
	.o-header__drawer-actions {
		padding: 0 $_o-header-drawer-padding-x
			calc($_o-header-drawer-padding-y + 4px) $_o-header-drawer-padding-x;
	}

	.o-header__drawer-button {
		width: 100%;
	}

	//
	// Search
	//
	.o-header__drawer-search {
		padding: 0 $_o-header-drawer-padding-x
			calc($_o-header-drawer-padding-y + 4px) $_o-header-drawer-padding-x;

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

		.o-forms-field {
			margin-bottom: 0px;
		}
	}

	.o-header__drawer-search-term {
		box-sizing: border-box;
		height: 40px;
		padding: 8px (div($_o-header-drawer-padding-x, 2));
		border: 1px solid;
		// prevent zoom on focus
		font-size: 100%;
		line-height: 40px;
	}

	.o-header__drawer-search-term {
		background-color: _oHeaderGet('drawer-search-term-background');
		border-color: _oHeaderGet('drawer-search-term-border');
		flex-grow: 1;
		// normalize
		appearance: none;
		background: white;
		border-style: solid;
		box-shadow: none;
		border-radius: 0;
		// margin copied from o-forms since introducing a new dependency would
		// be a breaking change, this colour could go in o-colors as a usecase
		border: 1px solid oPrivateFoundationGet('o3-color-palette-black-50');
		margin-right: oPrivateSpacingByName('s2');

		&:focus {
			//currently overriden by o-normalise
			border-color: _oHeaderGet('drawer-search-term-highlight-border');
		}
	}

	.o-header__drawer-search-submit {
		@include oPrivateButtonsContent(
			(
				'type': 'primary',
				'icon-only': true,
				'icon': 'search',
				'size': 'big',
			)
		);
	}

	//
	// Lists
	//
	.o-header__drawer-menu {
		color: _oHeaderGet('drawer-menu-text');
		border-color: _oHeaderGet('drawer-menu-border');
	}

	.o-header__drawer-menu--user {
		background-color: _oHeaderGet('drawer-menu-user-background');
		padding-bottom: $_o-header-drawer-padding-y;
		border-top: 1px solid _oHeaderGet('drawer-menu-user-border');
	}

	.o-header__drawer-menu-list {
		list-style-type: none;
		padding: 0;
		margin: 0;
		overflow: hidden;
	}

	.o-header__drawer-menu-list--divide {
		border-top: 2px solid _oHeaderGet('drawer-menu-border');
	}

	.o-header__drawer-menu-list--child {
		[data-o-header-drawer--no-js] & {
			display: none;
		}

		[data-o-header-drawer--js] & {
			// hide from the off to avoid any transition on page load
			max-height: 0;
			// take the contents away from tab order
			visibility: hidden;
			transition: max-height 0.25s ease-out;

			&[aria-hidden='false'] {
				background-color: _oHeaderGet('drawer-menu-list-background');
				// magic number... you can't transition between 0 and unknown
				// but as long as this is larger than the content it will do
				max-height: 600px;
				visibility: visible;
				// a border would create some flickery layout
				box-shadow: inset 0 -1px 0 _oHeaderGet('drawer-menu-border'),
					inset 0 1px 0 _oHeaderGet('drawer-menu-border');
			}
		}
	}

	.o-header__drawer-menu-item {
		margin-top: 1px;
	}
	.o-header__drawer-divider {
		margin-top: 16px;
		width: 1px;
		height: 16px;
		background-color: oPrivateColorsMix(
			'o3-color-palette-black',
			'o3-color-palette-paper',
			60
		);
		display: inline-block;
	}

	.o-header__drawer-menu-item--heading {
		font-family: oPrivateFoundationGet('o3-type-body-highlight-font-family');
		font-size: oPrivateFoundationGet('o3-type-body-highlight-font-size');
		line-height: oPrivateFoundationGet('o3-type-body-highlight-line-height');
		font-weight: oPrivateFoundationGet('o3-type-body-highlight-font-weight');
		margin-bottom: 0px;
		background-color: _oHeaderGet('drawer-menu-item-background');
		padding: (div($_o-header-drawer-padding-x, 2)) $_o-header-drawer-padding-x;
	}

	//
	// Toggles
	//
	.o-header__drawer-menu-toggle-wrapper {
		position: relative;
	}

	.o-header__drawer-menu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 42px;
		// normalize the button
		padding: 0;
		text-align: left;
		border: 0;
		cursor: pointer;
		// visually hide text...
		font-size: 0;

		&:before {
			content: ' ';
			margin-left: 9px; // magic number to vertically align icon in box
		}

		&[aria-expanded='true'] {
			&:before {
				// don't download another icon...
				transform: rotate(180deg);
			}
		}

		&:hover {
			// hide focus outline on hover
			outline: 0;
		}

		&:focus {
			// Ensure focus outline remains above sibling buttons.
			z-index: 1;
		}

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

	.o-header__drawer-menu-toggle--selected {
		background: rgba(_oHeaderGet('drawer-selected-toggle-background'), 0.25);

		&:before {
			@include oPrivateIconsContent(
				'arrow-down',
				_oHeaderGet('drawer-selected-toggle-text'),
				$size: $_o-header-icon-size
			);
		}
	}

	.o-header__drawer-menu-toggle--unselected {
		background: rgba(_oHeaderGet('drawer-unselected-toggle-background'), 0.85);

		&:before {
			@include oPrivateIconsContent(
				'arrow-down',
				_oHeaderGet('drawer-unselected-toggle-text'),
				$size: $_o-header-icon-size
			);
		}
	}

	//
	// Links
	//
	.o-header__drawer-menu-link {
		color: _oHeaderGet('drawer-menu-link-text');
		display: block;
		padding: $_o-header-drawer-padding-y $_o-header-drawer-padding-x;
		border-bottom: 0;
		font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
		font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
		line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
		font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
		text-decoration: none;
		// This value exists to show the focus ring
		// We need to keep it in sync to the outline width in o-normalise
		// TODO: We should find a more maintainable way of setting focus rings
		outline-offset: -2px;

		&:hover {
			color: _oHeaderGet('drawer-menu-link-hover-text');
		}

		[aria-expanded='true'] + & {
			background-color: _oHeaderGet('drawer-menu-link-background');
		}
	}

	.o-header__drawer-menu-link--selected {
		color: _oHeaderGet('drawer-menu-selected-link-text');
		background-color: _oHeaderGet('drawer-menu-selected-link-background');

		&:hover,
		&:focus {
			color: _oHeaderGet('drawer-menu-selected-link-hover-text');
			//also overriden by o-normalise
			outline-color: _oHeaderGet('drawer-menu-text');
		}

		[aria-expanded='true'] + & {
			// specificity
			background-color: _oHeaderGet('drawer-menu-selected-link-background');
		}
	}

	.o-header__drawer-menu-link--child {
		padding-left: 40px;
	}

	.o-header__drawer-menu-link--secondary {
		font-weight: 600;
	}

	.o-header__drawer-menu-link-detail {
		display: block;
		margin-top: 0.25em;
		font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
		font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
		line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
		font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
	}

	.o-header__ask-ft-button--drawer {
		@include _oHeaderAskFtButton();

		// Same as .o-header__drawer-search
		@include oPrivateGridRespondTo('M') {
			display: none;
		}

		justify-content: center;
	}

	.o-header__ask-ft-button--drawer + .o-header__drawer-menu {
		margin-top: $_o-header-drawer-padding-y;
	}
}