/***************************************
Hamburger
****************************************/

%hamburger-item {
	height: 4px;
	border-radius: 4px;
	background-color: white;
	display: block;
	transition: all .2s ease-out;
}
.hamburger {
	float: left;
	margin: 28px 27px;
	margin-right: 0;
	height: 26px;
	width: 40px;
	position: relative;
	transition: all .2s ease-out;

	span {
		@extend %hamburger-item;
		width: 80%;
		margin-bottom: 2px;
		position: relative;
		transition: all .2s ease-out;
		&:last-of-type {
			width: 100%;
		}
	}

	&:before {
		@extend %pseudos;
		@extend %hamburger-item;
		width: 100%;
		right: 0;
		top: -6px;
	}
	&:after {
		@extend %pseudos;
		@extend %hamburger-item;
		width: 80%;
		left: 0;
		top: 12px;
		
	}

	.no-touch &:hover {
		span {
			width: 100%;
		}
		&:before {
			width: 80%;
		}
		&:after {
			width: 80%;
		}
	}
}
.fries {
	float: left;
	height: 26px;
	width: 40px;
	position: relative;
	transition: all .2s ease-out;
	transform: translateY(-100px) scale(0.78);
	position: absolute;
	top: 27px;
	left: 27px;

	span {
		height: 5px;
		border-radius: 4px;
		background-color: white;
		display: block;
		transition: all .2s ease-out;
		width: 100%;
		transform: rotate(-45deg);
		position: relative;
		top: 5px;

		&:last-of-type {
			transform: rotate(45deg);
			top: 0;
		}
	}

}
.js-nav-open .hamburger {
	transform: translateX(-100px);
}
.js-nav-open .fries {
	transform: translateY(0) scale(0.7);
	&:hover {
		transform: translateY(0) scale(0.8);
		transform-origin: center;
	}
}


/***************************************
Nav Container
****************************************/

nav {
	position: fixed;
	top: 70px;
	bottom: 0;
	left: 0;
	transform: translateX(-250px);
	background-color: $color-background;
	width: 250px;
	transition: transform .3s .2s ease-out; 
	overflow-y: auto;
	padding: em(25);
	z-index: 9999;
}
.js-nav-open nav {
	transform: translateX(0);
	transition: transform .3s 0s ease-out; 
}

/***************************************
Nav List
****************************************/

.nav-list {
	display: block;
	list-style: none;
	text-align: left;
	transform: translateX(-450px);
	transition: transform .3s 0s ease-out; 
}
.nav-list__item {
	display: block;
	position: relative;

	a {
		text-transform: uppercase;
		font-weight: $font-regular;
		font-size: $font-small;
		color: $color-primary;
		display: block;
		transition: color .3s;
		padding: em(10) 0;
	}


	&:before {
		@extend %pseudos;
		width: 5px;
		height: 10px;
		left: -25px;
		transform: translateX(-5px);
		transition: transform .3s;
		top: 0;
		bottom: 0;
		margin: auto;
		background: url('/images/icon-arrow.png');
		background-size: cover;
	}

	.no-touch &:hover {
		a {
			color: $red;
		}
		a.disabled {
			color: $color-disabled-nav;
		}
		&:before {
			transform: translateX(0);
		}
	}

	
	a.disabled {
		color: $color-disabled-nav;
	}
}

.js-nav-open .nav-list {
	transform: translateX(0);
	transition: transform .3s .2s ease-out; 
}