/* Dropdown */

.dropdown-menu {
	@include default-shape();

	position: relative;
	display: inline-block;
	padding: 10px 20px;
	background: $grayBackground2;
	border: 1px solid $borderColor;

	.trigger-text {
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.trigger-icon {
		color: $mainColor;
	}

	.dropdown-menu-list {
		@include default-shape();
		@include card-shadow();

		opacity: 0;
		transform: scaleY(0);
		position: absolute;
		left: 0;
		top: calc(100% + 5px);
		z-index: 101;
		min-width: 100%;
		max-width: 300px;
		overflow: auto;
		pointer-events: none;
		background: $whiteColor;
		transition: opacity 0.2s ease-out, transform 0.2s ease-in-out;
		transform-origin: center top;

		.item {
			padding: 10px 30px;
			color: $mainTextColor;
			display: flex;
			align-items: center;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;

			i {
				margin-right: 5px;
			}

			.symbol {
				color: $mainColor;
				font-weight: 600;
				margin-right: 5px;
			}
		}
	}

	&.dropdown-menu-small {
		border: 0;
		padding: 4px 7px;

		.trigger-text {
			text-transform: uppercase;
			font-size: 11px;
			font-weight: 700;
			color: $mainTextColor;
		}

		.dropdown-menu-list {
			.item {
				font-size: 12px;
				font-weight: 500;
				padding: 7px 10px;
			}
		}
	}

	&.dropdown-menu-open .dropdown-menu-list {
		opacity: 1;
		pointer-events: auto;
		transform: scaleY(1);
	}
}


// User Dropdown Menu
.user-info-menu {
	&:before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 10;
		background: rgba($mainTextColor, 0.7);
		pointer-events: none;
		opacity: 0;
	}

	.dropdown-menu-wrapper {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 99;
		display: none;
		min-width: 200px;

		.nh-submenu {
			@include default-shape();
			@include dropdown-shadow();

			border: 1px solid $whiteColor;
			text-shadow: none;
			display: flex;
			margin-top: 9px;

			> ul {
				flex-basis: 50%;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				width: 50%;
			}

			&:before,
			&:after {
				content: "";
				position: absolute;
				right: 12px;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 10px solid #e1e1e1;
			}

			&:before {
				top: 0px;
			}

			&:after {
				top: 1px;
			}

			.nh-accordion-handler:after {
				content: "\f107";
				top: 8px;
				font-size: 14px;
				right: 10px;
			}

			&.nh-accordions {
				padding: 5px 20px;

				ul > li {
					&:before {
						display: none;
					}
					> a {
						padding: 8px 5px;

						&.nh-accordion-handler {
							padding-right: 25px;
						}
					}
				}

				ul + ul {
					margin-left: 10px;
				}
			}
		}
	}

	&:hover {
		.dropdown-menu-wrapper {
			display: block;

			@include tablet {
				display: none
			}

			@include mobile {
				display: none
			}
		}
	}
}

.ui.dropdown .menu>.header {
	line-height: 1;
}