.mw-header {
	--margin-header-item: @margin-header-item;
	--margin-header-item--corner: ~'calc( var( --padding-page ) / 2 )';
	--padding-header-icon: ~'calc( ( var( --height-header ) - var( --size-icon ) - var( --margin-header-item ) * 2 ) / 2 )';
	--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;
	}

	ul {
		list-style: none;
	}

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

	&:before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: ~'calc( var( --height-header ) / -2 )';
		left: 0;
		background: var( --color-surface-0 );
		content: '';
		-webkit-mask-image: linear-gradient( 180deg, #000, transparent );
		mask-image: linear-gradient( 180deg, #000, transparent );
	}

	&-button {
		width: var( --size-icon );
		height: var( --size-icon );
		padding: var( --padding-header-icon );
		margin-top: var( --margin-header-item );
		margin-bottom: var( --margin-header-item );
		background-color: transparent;
		border-radius: var( --border-radius--small );
		cursor: pointer;

		&:active {
			// Override hover style
			background-color: var( --background-color-quiet--active ) !important;
		}
	}
}

#mw-header-tools {
	display: inherit;
}

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

@media ( hover: hover ) {
	.mw-header-button:hover {
		background-color: var( --background-color-quiet--hover );
	}
}