////
/// Nav Primary component.
///
/// @group  Components
/// @author Lee Anthony <seothemeswp@gmail.com>
/// @link   https://CustomizePro.com/
////

.nav {

	&-primary {
		display: flex;
		z-index: 4;
		top: 100%;
		left: 0;
		width: auto;

		.has-logo-side & {
			width: 100%;

			.menu {
				width: 100%;
			}
		}

		.has-logo-above & {
			width: 100%;
			justify-content: center;
		}

		.has-logo-above &.flex-start-desktop {
			justify-content: flex-start;
		}

		.has-logo-above &.flex-center-desktop {
			justify-content: center;
		}

		.has-logo-above &.flex-end-desktop {
			justify-content: flex-end;
		}

		@include mq(0,m) {
			display: none;
			width: 100vw;

			.has-mobile-menu-left &,
			.has-mobile-menu-right &,
			.has-mobile-menu-center & {
				display: flex;
				align-items: center;

				@include position(fixed, 0 0 0 0);
				@include size(100%);
				@include padding(0 $spacing--l);
			}

			.has-mobile-menu-center & {
				opacity: 0;
				transform: scale(0);

				&.visible {
					opacity: 1;
					transform: scale(1);
				}
			}

			.has-mobile-menu-right & {
				transform: translateX(100vw);
			}

			.has-mobile-menu-left & {
				transform: translateX(-100vw);

				&.visible {
					transform: translateX(0);
				}
			}

			.has-mobile-menu-top & {
				transition: none;
				order: 4;
			}
		}

		.no-js & {
			display: flex;
			position: relative;
		}
	}

	&-secondary {
		display: flex;
		position: relative;
		z-index: 2;
		width: 100%;
		margin: 0 auto;
		opacity: 1;
		align-items: center;

		@include mq(0, m) {
			display: none;
			transition: background-color $base--transition-duration $base--transition-timing-function, opacity $base--transition-duration $base--transition-timing-function;
		}

		.wrap {
			position: relative;
			height: 100%;
		}

		.menu {
			height: 100%;
			justify-content: flex-start;
		}

		.has-logo-side & {
			height: auto;
		}
	}

	&-footer {
		display: block;
		position: relative;
	}
}