/* Navigation Primary - Mobile
----------------------------------------------------------*/

.menu-toggle {
	float: left;
	margin-right: 15px;

	.mobile-trigger {
		position: relative;
		top: -2px;
		vertical-align: middle;
		line-height: 1;
		width: 22px;
		height: 14px !important;

		&:after {
			position: absolute;
			top: 6px;
			background-color: $color-text-dark;
			height: 2px !important;
			width: 100%;
			content: ' ';
			@include transition(all 0.2s ease-out);
		}
		
		> span {
			&:after, &:before, & > span:after, & > span:before {
				position: absolute;
				left: 0;
				background-color: $color-text-dark;
				height: 2px;
				width: 100%;
				content: ' ';
				display: block;
				@include transition(all 0.2s ease-out);
			}
			&:before { top: 0; }
			&:after { bottom: 0; }

			> span:after, & > span:before  {
				top: 6px;
			}
		}
	}
	@media #{$screen-min-md} { 
		& {
			display: none; 
		}
	}
}

html[dir="rtl"] .menu-toggle {
	float: right;
	margin-right: 0;
	margin-left: 15px;
}

.dark, .transparent:not(.out) {
	.mobile-trigger {
		&:after {
			background-color: $color-white;
		}
		> span {
			&:after, &:before, & > span:after, & > span:before {
				background-color: $color-white;
			}
		}
	}
}

body.mobile-nav-open {
	.menu-toggle .mobile-trigger {
		&:after {
			@include rotateZ(-45deg);
		}
		span {
			&:before, &:after {
				@include scaleX(0);
			}
			> span:after {
				@include rotateZ(45deg);
			}
		}
	}
}

@media #{$screen-sm} {
	.nav-primary {
		position: absolute;
		top: $header-height;
		left: 0;
		right: 0;
		width: 100%;
		background-color: $color-white;
		padding-left: 15px;
		padding-right: 15px;
		line-height: 1 !important;
		list-style: none;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		border-top: 1px solid $color-line-dark;
		overflow: auto;
		max-height: 80vh;
		display: none;
		@include box-shadow(0px 2px 3px 0px rgba(0,0,0,0.1));

		li {
			a {
				position: relative;
				height: auto !important;

				&:hover, &:focus {
					background: transparent;
				}

				> i {
					margin-right: 8px;
				}

				> .label {
					margin-left: 5px;
				}
			}
			> a {
				display: block !important;
			}
			&.has-dropdown,
			&.has-megamenu {
				> a:after {
					position: absolute;
					top: 19px;
					right: 13px;
					font-family:themify;
					font-size: 80%;
					@include opacity(0.5);
					@include transition(all 0.2s ease-out);
					content:"\e62a";
				}
			}
			&.has-megamenu {
				h6, li {
					padding-left: 0 !important;
				}
				ul {
					display: block !important;
				}
			}
		}

		> li {
			display: block;
			float: none;
			border-bottom: 1px solid $color-line-dark;

			&:last-child {
				border-bottom: none;
			}

			> a {
				padding: 17px 0;

				&.has-dropdown,
				&.has-megamenu {
					> a:after {
						top: 11px;
						@include opacity(1);					}
				}
			}

			ul {
				list-style: none;
				font-size: 12px;
				font-weight: 600;
				margin: 0 0 20px 0;
				padding: 0;
				display: none;

				> li {
					padding-left: 15px;

					a {
						padding: 10px 0;
						font-weight: 400;
						@include opacity(0.6);

						&:hover, &:focus {
							@include opacity(1);	
						}
					}
				}
			}

			&.lang {
				> a {
					@include opacity(0.6);
					font-size: 11px;
				}
			}
		}
		.megamenu {
			display: none;
			h6 {
				font-size: 11px;
				padding-left: 15px;
			}
			.banner {
				position: relative;
				text-transform: none;
			}
		}
	}

	html[dir="rtl"] .nav-primary {
		font-size: 13.5px;

		li {
			a {
				> i {
					margin-right: 0;
					margin-left: 8px;
				}

				> .label {
					margin-left: 0;
					margin-right: 5px;
				}
			}
			&.has-dropdown,
			&.has-megamenu {
				> a:after {
					right: auto;
					left: 13px;
				}
			}
			&.has-megamenu {
				h6, li {
					padding-right: 0 !important;
				}
			}
		}

		.megamenu {
			h6 {
				padding-right: 15px;
			}
		}
	}
}