@font-size-user-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
// Applies to links in the overflow menu that do not have the .cdx-button class.
@overflow-link-margin: 0 8px;

/**
 * Container that holds both the horizontal menu and dropdown menus.
 */
.vector-user-links {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: flex-end;
	flex-shrink: 1;

	.mw-list-item {
		margin: 0;
	}
}

/**
 * Both logged-in and logged-out dropdown menus.
 */
.vector-user-menu {
	.vector-dropdown-content {
		.mixin-vector-dropdown-content-flip();
	}

	// Used to hide collapsible items inside the dropdown menu
	// as well as the dropdown menu itself when the menu is empty
	&.user-links-collapsible-item,
	.user-links-collapsible-item {
		@media ( min-width: @min-width-breakpoint-tablet ) {
			display: none;
		}
	}
}

.vector-user-links-main {
	display: flex;
	align-items: center;

	.vector-menu-content-list {
		display: flex;
		align-items: center;
		font-size: @font-size-user-links;
	}

	@media ( min-width: @min-width-breakpoint-desktop ) {
		// Right margin to separate overflow menu from dropdown
		margin-right: 8px;

		#p-vector-user-menu-notifications,
		#p-vector-user-menu-userpage,
		#p-vector-user-menu-preferences {
			margin-right: 8px;
		}

		.vector-menu-content-list {
			column-gap: 8px;
		}
	}

	@media ( max-width: @max-width-breakpoint-tablet ) {
		// Only apply 8px spacing to normal links (i.e. Create account, User page)
		// Links with button classes will have a larger touch area
		// and therefore dont need additional spacing
		a:not( .mw-echo-notifications-badge  ):not( .cdx-button ) {
			margin: 0 8px;
		}
	}

	.user-links-collapsible-item {
		@media ( max-width: @max-width-breakpoint-mobile ) {
			display: none;
		}
	}
}

/**
 * Horizontal links menu - logged in and logged out.
 * FIXME: for cached HTML.
 */
.vector-user-links .mw-portlet-vector-user-menu-overflow {
	font-size: @font-size-user-links;

	.vector-menu-content-list {
		display: flex;
		align-items: center;
	}

	@media ( min-width: @min-width-breakpoint-desktop ) {
		// Right margin to separate overflow menu from dropdown
		margin-right: 8px;

		// Separate menu items inside overflow menu
		.vector-menu-content-list {
			column-gap: 8px;
		}
	}

	@media ( max-width: @max-width-breakpoint-tablet ) {
		// Only apply 8px spacing to normal links (i.e. Create account, User page)
		// Links with button classes will have a larger touch area
		// and therefore dont need additional spacing
		a:not( .mw-echo-notifications-badge  ):not( .cdx-button ) {
			margin: 0 8px;
		}
	}

	.user-links-collapsible-item {
		@media ( max-width: @max-width-breakpoint-mobile ) {
			display: none;
		}
	}
}

/**
 * Logged-in dropdown menu
 */
.vector-user-menu-logged-in .vector-dropdown-label {
	.mixin-vector-arrowed-dropdown-toggle();
}

/**
 * Dropdown menu items- Special treatment for special links.
 */
#p-user-menu-anon-editor .vector-menu-heading {
	display: block;

	a::before {
		content: '@{msg-parentheses-start}';
	}

	a::after {
		content: '@{msg-parentheses-end}';
	}
}

//User-page link in personal (overflow) menu.
#pt-userpage-2 {
	max-width: unit( 155 / @font-size-browser / @font-size-user-links, em );

	a:not( .mw-selflink ) {
		// T312157 Override redlink (.new) color for non-existant userpage
		color: @color-link;
	}

	span {
		.text-overflow( @visible: false );
	}

	// T287522#7295558: Increase the max-width of the username when viewport
	// allows for it.
	@media ( min-width: @min-width-breakpoint-desktop-wide ) {
		max-width: unit( 200 / @font-size-browser / @font-size-user-links, em );
	}
}