.menu-user {
	padding: 12px 0;

	li {
		line-height: 16px;
	}

	[class^="zi-"], [class*=" zi-"] {
		&::before {
			margin-right: 16px;
			font-size: $menu-user-icon-size;
			line-height: 0;

			@if $ui-transitions {
				transition: color $ui-controls-transition-duration ease-out;
			}
		}
	}

	a,
	span {
		position: relative;
		display: block;
		padding: 12px 14px 12px 45px;
		font-size: 12px;
		white-space: nowrap;
		border-left: 3px solid transparent;

		@if $ui-transitions {
			transition: color $ui-transition-duration ease-out;
		}
	}

	[class^="zi-"], [class*=" zi-"] {
		padding-left: 13px;

		&::before {
			color: $menu-user-icon-color;
		}
	}

	a {
		color: $menu-user-color;

		&:hover,
		&:focus {
			border-bottom: 0;
			border-color: $menu-user-hover-border-color;
			color: $menu-user-hover-color;

			&[class^="zi-"], &[class*=" zi-"] {
				&::before {
					color: inherit;
				}
			}
		}
	}

	span {
		color: $menu-user-disabled-color;
	}

	& > li {
		&.is-selected {
			> a {
				background: $menu-user-selected-bg-color;
				border-left-color: $menu-user-selected-border-color;
				color: $menu-user-selected-color;
			}
		}

		&.is-expanded {
			& > a {
				&,
				&:focus {
					background: $menu-user-expanded-bg-color;
					border-left-color: $menu-user-expanded-border-color;
					color: $menu-user-expanded-color;
				}

				&[class^="zi-"], &[class*=" zi-"] {
					&::before {
						color: $menu-user-expanded-icon-color;
					}
				}
			}
		}

		&:not(.is-expanded) {
			.submenu {
				max-height: 0 !important;
			}
		}
	}

	.has-submenu {
		& > a {
			&::after {
				@extend %icons-font;
				position: relative;
				float: right;
				top: 4px;
				font-size: $icon-medium-size * .5;
				content: $zi-chevron-down;
				transform: rotate(0deg);

				@if $ui-transitions {
					transition: transform $ui-transition-duration;
				}
			}
		}

		&.is-expanded {
			& > a {
				&::after {
					transform: rotate(-180deg);
				}
			}
		}
	}

	.submenu {
		position: relative;
		padding-left: 24px;
		overflow: hidden;
		background: $menu-user-submenu-border-color;

		> li {
			line-height: 14px;

			&.is-selected {
				> a {
					background: $menu-user-submenu-selected-bg-color;
					border-left-color: $menu-user-submenu-selected-border-color;
					color: $menu-user-submenu-selected-color;

					&:hover,
					&:focus {
						background: $menu-user-submenu-hover-bg-color;
						color: $menu-user-submenu-hover-color;
					}
				}
			}

			&:not(:last-child) {
				border-bottom: 1px solid $menu-user-submenu-border-color;
			}
		}

		[class^="zi-"], [class*=" zi-"] {
			&::before {
				margin-right: 8px;
				color: inherit;
			}
		}

		a {
			padding: 8px 20px;
			background: $menu-user-submenu-bg-color;
			color: $menu-user-submenu-color;

			&:hover,
			&:focus {
				background: $menu-user-submenu-hover-bg-color;
				border-left-color: $menu-user-submenu-hover-border-color;
				color: $menu-user-submenu-hover-color;
			}
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			right: 0;
			left: 0;
			z-index: 999;
			box-shadow: 0 0 6px 2px rgba(0, 0, 0, .35);
		}

		&::before {
			top: 0;
		}

		&::after {
			bottom: 0;
		}

		@if $ui-transitions {
			transition: max-height $ui-transition-duration ease;
			will-change: max-height;
		}

		.submenu {
			position: fixed;
			top: 0;
			left: 100%;
			padding: 1px;
			box-shadow: 4px 4px 8px 0 $menu-user-submenu-next-level-shadow;

			li {
				border: 0;

				a {
					padding: 6px 20px;
					border-left: 0;
					background-color: $menu-user-submenu-next-level-bg;
				}

				&.is-selected a {
					background-color: $menu-user-submenu-selected-bg-color;
				}

				a:hover,
				a:focus {
					background-color: $menu-user-submenu-hover-bg-color;
				}
			}

			@if $ui-transitions {
				transition: none;
			}

			&::before,
			&::after {
				display: none;
			}
		}

		.has-submenu {
			& > a {
				&::after {
					transform: rotate(90deg);
				}
			}

			&:not(.is-expanded) {
				a {
					&::after {
						transform: rotate(-90deg);
					}
				}

				.submenu {
					left: -9999px !important;
				}
			}
		}
	}
}
