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

.vector-user-links {
	display: flex;
	align-items: center;
	height: 30px;
	position: relative;

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

		h3 {
			height: 100%;
			min-width: 48px;
			// Override background size from common/components/UserLinks.less
			// stylelint-disable-next-line declaration-no-important
			background-size: auto !important;
			background-position: 25%;

			&:after {
				background-position: 100% 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;
				}
			}

			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;
			}
		}
	}

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

	.mw-portlet-user-page {
		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;
	}

	// Adjust the user-interface-preferences menu.
	.mw-portlet-user-interface-preferences {
		margin-top: -0.2em;
		margin-right: 0;
		padding: 0;

		// 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;
		}
	}
}