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

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

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

			li {
				padding-top: 0;
				margin-left: 1em;
				white-space: nowrap;

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

				// Below tablet threshold, all menu items except the notification icons will collapse into the user menu
				// This ensures a max of 4 icons on small screen sizes (i.e. search, 2 notification icons and the user avatar)
				&.user-links-collapsible-item {
					display: none;

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

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

		h3 {
			color: transparent; // overrides MediaWiki UI icon
			height: 100%;
			font-size: inherit;
		}

		.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 {
				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;

			p,
			span {
				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 {
		@offset-icon-down-arrow: 4px;
		@bg-height: unit( 12px / @font-size-browser, em );

		&:before {
			color: #54595d;
			margin-left: -@offset-icon-down-arrow;
		}

		&:after {
			background-position: 100% 0%;
			top: @icon-padding-md + ( @bg-height / 2 );
			right: @offset-icon-down-arrow;
		}
	}
}