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

.vector-user-links {
	display: flex;
	align-items: center;
	height: 30px;
	position: relative;
	justify-content: flex-end;
	flex-shrink: 1;

	// Overrides personal menu styles for consolidated user links.
	.vector-user-menu {
		margin: 0 0 0 12px;
		height: 100%;

		h3 {
			height: 100%;
			padding: 0;
		}

		.vector-menu-checkbox {
			&:hover + h3 {
				background-color: @colorGray14;
				border-radius: @border-radius-base;
			}
		}

		.vector-menu-content {
			min-width: 200px;
			top: 100%;
			left: unset;
			right: 0;
			border-top-width: 1px;
		}

		.vector-menu-content-list {
			li {
				// FIXME: the following font-size rule is for cached HTML. It can be removed when
				// I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production.
				// stylelint-disable-next-line declaration-no-important
				font-size: 100% !important;
				width: 100%;
				margin: 0;

				&:hover {
					background-color: @background-color-secondary;
				}

				&.user-links-collapsible-item {
					@media ( min-width: @width-breakpoint-tablet ) {
						display: none;
					}
				}
			}

			a {
				display: block;
				color: #000;
				text-decoration: none;
			}
		}

		// Copied from https://github.com/wikimedia/Vector/blob/master/resources/common/components/MenuDropdown.less#L88
		.vector-user-menu-anon-editor,
		.vector-user-menu-login {
			padding: 0.625em;
			margin: 0;
			font-size: @font-size-tabs;
		}

		// "Login" and "Logout" links in user menu
		.vector-user-menu-login {
			&:hover {
				background-color: @background-color-secondary;
			}

			&:first-child {
				border-bottom: 1px solid @border-color-base;
			}

			&:last-child {
				border-top: 1px solid @border-color-base;
			}

			a {
				display: block;
				color: #000;
				text-decoration: none;
			}
		}
	}

	.vector-user-menu-logged-out h3 {
		&:before {
			height: 100%;
		}

		&:after {
			content: none;
		}
	}

	.vector-user-menu-logged-in h3 {
		min-width: 48px;

		&:before {
			left: -25%;
			top: 0;
			bottom: 0;
			background-size: auto;
			color: #54595d;
		}

		&:after {
			background-position: 100% 0%;
		}
	}

	.mw-portlet-notifications {
		li {
			float: left;
			margin-left: 0;
		}
	}

	.mw-portlet-user-page {
		//  For logged-in users, below tablet threshold, the menu will collapse the user name/link to user page into the user menu
		display: none;

		@media ( min-width: @width-breakpoint-tablet ) {
			display: block;
		}

		li {
			margin-left: 1em;
			padding-bottom: 0.5em;

			a {
				background-position: left center;
				color: #000;
				text-decoration: none;
			}
		}
	}

	.vector-user-links-createaccount {
		margin-left: 0.75em;
		//  For logged-out users, below tablet threshold, the menu will collapse the create account link into the user menu
		display: none;

		@media ( min-width: @width-breakpoint-tablet ) {
			display: block;
		}
	}

	// Adjust the user-interface-preferences menu.
	.mw-portlet-user-interface-preferences {
		margin-top: -0.2em;
		margin-right: 0;
		padding: 0;
		// The menu is collapsed into the p-personal menu at lower resolutions, because the features
		// are accessible via Special:Preferences with a few more clicks and there is not space to
		// accomodate this icon at this resolution.
		display: none;

		@media ( min-width: @width-breakpoint-tablet ) {
			display: block;
		}

		// Hide the heading of the user-interface-preferences menu.
		h3 {
			display: none;
		}

		li {
			font-size: 0.75em;

			a {
				padding-left: 2em;
			}
		}

		ul.vector-menu-content-list {
			padding-top: 0;
		}
	}
}