// ====================================================================================================================
// RESPONSIVE NAVS w/ responsive-nav.js (https://github.com/raffone/responsive-nav.js)
// ====================================================================================================================


@if $navs-responsive {

	#nav-toggle {
		@extend %nav-toggle !optional;
		display: none;
		float: $navs-responsive-dropdown-pos;
	}


	.nav--responsive 				{}
	.nav--responsive.notactive 		{ @extend %nav-big !optional; }
	.nav--responsive.active 		{ @extend %nav-small !optional;	}
	.nav--responsive.close 			{ max-height: none;	}


	@include media($navs-responsive-breakpoint) {

		#nav-toggle { display: block; }

		.nav--responsive {
			display: block;
			margin: 0;
			zoom: 1;
			overflow: hidden;

			> ul {
				padding: $wrapper-padding;
			}

			ul, ul * {
				@include border-radius(0);
				background: transparent;
				border: 0;
				display: block;
				float: none;
				margin: 0;
				position: static;
				text-align: left;
				width: 100%;
			}

		}

		// SLIDE
		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
		@if $navs-responsive-type == 'slide' {

			.nav--responsive {
				clip: rect(0 0 0 0);
				max-height: 0;
				width: 100%;

				&.opened {
					max-height: 9999px;
				}

			}

		}

		// OFFCANVAS
		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
		@if $navs-responsive-type == 'off-canvas' {

			// Wrappers
			// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
			#{$navs-responsive-outside-wrapper},
			#{$navs-responsive-inside-wrapper} {
				position: relative;
				width: 100%;
			}

			#{$navs-responsive-outside-wrapper} {
				overflow-x: hidden;
			}

			// Transitions
			// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
			#{$navs-responsive-inside-wrapper},
			.nav--responsive {
				@include transition();
				@include backface-visibility(hidden);
			}


			// Animations
			// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
			#{$navs-responsive-inside-wrapper} {
				@include transform(translate3d(0,0,0));
				left: 0;
			}

			.nav--responsive {
				@include position(absolute, 0px 0px 0px 0);
				@include transform(translate3d(100%,0,0));
				height: 100%;
				width: $navs-responsive-offset;
			}

			.nav-open {
				#{$navs-responsive-inside-wrapper} {
					@include transform(translate3d((0 - $navs-responsive-offset),0,0));
					position: relative;
				}

				.nav--responsive {
					@include transform(translate3d(0,0,0));
				}
			}


		}

	}
}