.mw-header {
	--width-button-base: ~'calc(var(--size-icon) + var(--padding-page))';
	--width-button-corner: ~'calc(var(--size-icon) + var(--padding-page) * 2)';
	position: fixed;
	z-index: 10;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	height: var( --height-header );
	justify-content: space-between;
	pointer-events: none;

	& > * {
		pointer-events: auto;
	}

	&-tools {
		display: inherit;
	}

	ul {
		list-style: none;
	}

	ul,
	li {
		display: block;
		margin: 0;
	}

	&:before {
		position: absolute;
		right: 0;
		left: 0;
		box-shadow: 0 0 ~'calc( var( --height-header ) - 15px )' var( --height-header ) var( --background-color-overlay );
		content: '';
	}
}

// User icon bar
#p-personal-extra {
	ul {
		display: flex;
		height: var( --height-header );
		align-items: center;
	}
}

@media ( min-width: @width-breakpoint-desktop-wider ) {
	.mw-header:before {
		box-shadow: none; // don't need a background anymore
	}
}