@import '../../minerva.less/minerva.variables.less';

// The top level user account button in the upper right near the notifications button.
.minerva-user-navigation {
	display: flex;
	height: @headerHeight;
	// Fill empty space left / start so the buttons can stay right / end.
	width: 100%;
	// Keep space for at least two buttons.
	min-width: 2 * 43px;
	// Center vertically.
	align-items: center;
	// Layout from right / end.
	justify-content: flex-end;
	// Show the list relative the button.
	position: relative;

	.mw-ui-icon-element {
		display: block;
		width: 43px;
		min-width: 43px;

		&:before {
			margin: 0 11.5px;
		}
	}

	.toggle-list {
		width: 43px;
		display: inline-block;
	}
}