//----------------------------------------------------------------------------------------------------------------------
// MAIN NAVIGATION VARIABLES
//----------------------------------------------------------------------------------------------------------------------

// Drawer settings

/// Whether the drawer should be before or behind the nav bar background.
/// @type Bool
$nav-drawer-behind: true !default; // If the drawer should be before or behind the nav bar background

/// Whether to dim the content behind the drawer while the drawer is opened
/// @type Bool
$nav-drawer-overlay: false !default;

/// Total height of the main nav bar.
/// @type Length
$nav-height: rhythm(4) !default;

// Hamburger icon

/// Total width of the hamburger icon.
/// @type Length
$nav-hamburger-width: rhythm(2) !default;

/// Total height of the hamburger icon.
/// @type Length
$nav-hamburger-height: rhythm(1) !default;

/// Height of an individual bar inside the hamburger icon.
/// @type Length
$nav-hamburger-bar-height: rem(3px) !default;


//----------------------------------------------------------------------------------------------------------------------
// MAIN NAVIGATION
//----------------------------------------------------------------------------------------------------------------------

/// Main navigation.
/// @group layout
/// @example markup
///   <nav class="nav">
///     <div class="wrapper">
///       <button class="nav-toggle">
///         <span class="hamburger"></span>
///       </button>
///       <a class="nav-logo" href="#">
///         <img src="#" alt="Logo">
///       </a>
///       <div class="nav-drawer">
///         <ul class="nav-list">
///           <li class="nav-item">
///             <a class="nav-link" href="#">Nav item</a>
///           </li>
///           <li class="nav-item">
///             <a class="nav-link" href="#">Nav item</a>
///           </li>
///           <li class="nav-item">
///             <a class="nav-link" href="#">Nav item</a>
///           </li>
///           <li class="nav-item">
///             <a class="nav-link" href="#">Nav item</a>
///           </li>
///         </ul>
///       </div>
///     </div>
///   </nav>
.nav {
	@extend %viewport-padding;
	position: absolute;
	@include size(100%, $nav-height);
	z-index: $z-index-nav;

	// Attach nav to top if opened or in sticky mode
	&.active, &.sticky {
		position: fixed;
		top: 0;
	}

	// Element directly after the nav needs to compensate the height of the nav element
	& + * {
		padding-top: $nav-height;
	}

	// Nav background is done via pseudo element so that it allows control over z-index and animated movement
	&:before {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		@include size(100%);
		content: "";
	}

	// Add flex layout to wrapper
	.wrapper {
		position: relative;
		display: flex;
		height: 100%;

		@include media("<", $breakpoint-switch) {
			@include padding(null $nav-hamburger-width + rhythm(1));
		}

		@if $nav-drawer-behind != true {
			z-index: 1;
		}
	}
}

//----------------------------------------------------------------------------------------------------------------------
// NAV LOGO
//----------------------------------------------------------------------------------------------------------------------

.nav-logo { // Usually an "<a>" element
	display: block;
	height: 100%;
	padding: rhythm(.5);
	margin: 0 auto;

	img, picture {
		display: block;
		height: 100%;
	}
}

//----------------------------------------------------------------------------------------------------------------------
// NAV TOGGLE BUTTON
//
// Button to toggle the off-canvas drawer.
//----------------------------------------------------------------------------------------------------------------------

// Button
.nav-toggle {
	position: absolute;
	display: block;
	left: 0;
	@include size($nav-hamburger-width + rhythm(2), $nav-height); // Width plus padding
	@include margin(null rhythm(-1)); // Compensate extra padding
	overflow: visible;
	padding: 0 rhythm(1); // Not using mixins because we need to reset the vertical padding to 0
	cursor: pointer;
	border: none;
	background: none;

	// Disable toggle button if nav is not in drawer mode
	@include media(">=", $breakpoint-switch) {
		display: none;
	}
}

// Hamburger icon
.hamburger {
	top: $nav-height / 2 - $nav-hamburger-bar-height / 2;
	@include transition(background-color); // Fade out middle bar via background instead of opacity so pseudo-children stay visible

	// All bars
	&, &:before, &:after {
		position: absolute;
		display: block;
		@include size($nav-hamburger-width, $nav-hamburger-bar-height);
		background-color: $color-base;
	}

	// Only top and bottom bar
	&:before, &:after {
		content: "";
		@include transition(transform);
	}

	// Only top bar
	&:before {
		transform: translateY(-($nav-hamburger-height / 2 - $nav-hamburger-bar-height / 2));
	}

	// Only bottom bar
	&:after {
		transform: translateY($nav-hamburger-height / 2 - $nav-hamburger-bar-height / 2);
	}

	// Transformation to cross
	@at-root .nav.active & {
		background-color: transparent; // Fade out middle bar
		&:before {
			transform: rotate(45deg);
		}

		&:after {
			transform: rotate(-45deg);
		}
	}
}

//----------------------------------------------------------------------------------------------------------------------
// NAV LIST
//
// Listing of menu items.
//----------------------------------------------------------------------------------------------------------------------

// Nav list
.nav-list {
	@include media("<", $breakpoint-switch) {
		display: block;
		overflow-y: auto;
		max-height: 100%;
	}

	@include media(">=", $breakpoint-switch) {
		display: flex;
		flex-flow: row nowrap;
	}
}

// Single nav list item
.nav-item {
	display: block;
}

// Link inside a nav list item
.nav-link {
	@extend %viewport-padding;
	display: block;
	overflow: hidden;
	width: 100%;
	text-overflow: ellipsis;
	@include padding(rhythm(1) null);
	@include media(">=", $breakpoint-switch) {
		@include padding(0 rhythm(1));
		line-height: $nav-height;
	}
}

//----------------------------------------------------------------------------------------------------------------------
// NAV DRAWER
//
// The container that becomes the sliding off-canvas drawer.
//----------------------------------------------------------------------------------------------------------------------

.nav-drawer {
	@include media("<", $breakpoint-switch) {
		position: fixed;
		z-index: -1;
		top: 0;
		right: 100%;
		@include size(100%);
		padding-top: $nav-height;
		@include transition(transform);

		@if $nav-drawer-overlay {
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 100%;
				@include size(100%);
				background: rgba($color-base, 0.5);
				opacity: 0;
				@include transition(opacity);
				pointer-events: none;
			}
		}

		.nav.active & {
			transform: translateX(100%);

			@if $nav-drawer-overlay {
				&:after {
					opacity: 1;
				}
			}
		}
	}
}