/*------------------------------------
  Navigation Dropdown Style v2
------------------------------------*/

%link-active-state-v2 {
	color: $g-color-gray-dark-v4 !important;
	background-color: $g-color-gray-light-v4;
	border: none;
}

.navbar .u-sub-menu-v2 {
	.hs-has-sub-menu {
		.hs-has-sub-menu {
			> a::after {
				content: "\e902";
				font-family: "hs-icons";
				position: absolute;
				top: 50%;
				right: 15px;
				transform: translate3d(0, -50%, 0);
			}

			&.active > a,
			&:active > a,
			&:focus > a,
			&:hover > a {
				@extend %link-active-state-v2;
			}
		}
	}

	.hs-has-mega-menu {
		.hs-has-sub-menu {
			> a::after {
				content: "\e902";
			}
		}
	}

	.hs-sub-menu,
	.dropdown-menu {
		@include px-to-rem(font-size, 13px);
		@include px-to-rem(min-width, 230px);
		@include px-to-rem(padding, 10px 0);

		.dropdown-item {
			font-weight: inherit;
			color: inherit;
			padding: 0;

			&.active,
			&:active,
			&:focus,
			&:hover {
				border-color: $g-color-gray-light-v4;
				background-color: transparent;

				> a {
					@extend %link-active-state-v2;
				}
			}
		}

		a {
			color: $g-color-gray-dark-v4;
			text-decoration: none !important;
			display: block;
			@include px-to-rem(padding, 6px 25px);

			&:active,
			&:focus,
			&:hover {
				@extend %link-active-state-v2;
			}
		}

		& > li:not(:last-child) {
			border-bottom: 1px solid $g-color-gray-light-v4;
		}
	}

	.hs-sub-menu,
	.hs-mega-menu,
	.dropdown-menu {
		font-weight: normal;
		text-transform: none;
		@include px-to-rem(min-width, 200px);
		@include px-to-rem(margin-top, 0);
		padding: 0;
		color: inherit;
		background-color: $g-color-white;
		background-clip: border-box;
		border-width: 2px 0 2px 0;
		border-style: solid;
		border-top-color: $g-color-primary;
		border-bottom-color: $g-color-gray-dark-v4;
		border-radius: 0;
		box-shadow: 0 6px 12px rgba($g-color-black, .175);

		.hs-sub-menu {
			@include px-to-rem(margin-top, -15px);
		}
	}

	&.hs-mobile-state {
		.hs-sub-menu {
			width: auto;
		}

		.hs-sub-menu,
		.hs-mega-menu {
			.hs-sub-menu,
			.hs-mega-menu,
			.hs-sub-menu.hs-reversed,
			.hs-mega-menu.hs-reversed {
				@include px-to-rem(margin, 3px);
			}
		}
	}
}

.navbar .hs-mobile-state .u-sub-menu-v2 {
	.hs-sub-menu {
		width: auto;
	}

	.hs-sub-menu,
	.hs-mega-menu {
		.hs-sub-menu,
		.hs-mega-menu,
		.hs-sub-menu.hs-reversed,
		.hs-mega-menu.hs-reversed {
			@include px-to-rem(margin, 3px);
		}
	}
}