// //////////////////////////////////////////
// // SLIDE MENU BASE STYLES
// //////////////////////////////////////////

@if $slide-menu{

	html { 

		@include break($module-fold){
			width: 100%; 
			-webkit-overflow-scrolling: touch;
		}
	}

	.menu-open{
		height: 100%;

		body{
			height: 100%;
			overflow: hidden;
		}
	}

	.wrapper {

		@include break($module-fold){
			position: relative;
			z-index: 2;
			-webkit-backface-visibility: hidden;
			@include transform-transition(0.5s ease);
			@include transform(translate3d(0,0,0));
		}

		.menu-open &{
			overflow: hidden;
			height: 100%;
		} 
	}

	.slide-drawer {
		position: fixed;
		top: 0;
		bottom: 0;
		width: $menu-width;
		height: auto;
		overflow-y: scroll;
		background-color: $slide-menu-background-color;
		z-index: 1000;
		-webkit-overflow-scrolling: touch;
		@include transform-transition(0.5s ease-in-out, opacity 0s 0.5s);
		@include transform(translate3d(0,0,0));
		opacity: 0;
		color: $slide-menu-color;

		&.drawer-left {
			left: auto;
			right: 100%;

			.menu-open &{
				@include transform(translate3d(100%,0,0));
				opacity: 1;
				@include transform-transition(0.5s ease-in-out, opacity 0s);
			}
		}

		&.drawer-right {
			left: 100%;

			.menu-open &{
				@include transform(translate3d(-100%,0,0));
				opacity: 1;
				@include transform-transition(0.5s ease-in-out, opacity 0s);
			}		
		}
	}

	.drawer-content{
		padding: rem(60) 0 2rem;
		width: percentage(280/320);
		max-width: rem($grid-width);
		margin: 0 auto;
	}

	.slide-menu{
		padding: 0;
		position: relative;
		z-index: 2;

		& + .snap-utility{
			padding-top: 2rem;
		}

		ul {
			padding: 1.5rem 0;

			> li{

				& + li{
					margin-top: 0.5rem;
				}
			}
		}

		a {
			background-color: transparent;
			text-align: left;
			font-weight: 400;
			height: auto;
			line-height: $menu-line-height;
			background-image: none;
			border: 0;
			padding: 0;
			display: block;
			text-transform: none;
			text-shadow: none;
			font-size: 1rem;
			position: relative;
			color: $white;
			@include transition(color 0.25s ease, background-color 0.25s ease);
			text-decoration: none;
			display: inline-block;

			&:hover {
				color: $menu-link-color;
				color: $menu-link-hover-color;
			}
		}

		.nav-head{
			font-weight: 500;
			padding: 0;
			font-family: $headline-font;
			color: $white;
			float: none;
			width: auto;
			position: relative;
			margin: 0;

			a{
				color: $white;
				line-height: 1.2;
				font-size: rem(20);
				text-transform: uppercase;
				display: inline-block;
				color: $white;

				&:hover{
					color: $white;
				}
			}

			span{
				color: $white;
				line-height: 1.2;
				font-size: rem(18);
				text-transform: uppercase;
				display: inline-block;
				@include transition(color 0.3s ease);
			}

			& + ul{
				padding-top: 0.5rem;
			}

			& + li{
				margin-top: 0.5rem;
			}
		}
	}

	// //////////////////////////////////////////
	// // DRAWER CLOSE BUTTON
	// //////////////////////////////////////////
		
	.close-button{
		@include clearfix;
		position: absolute;
		top: 0;
		right: 0;

		.no-touchevents &{
			padding: 1rem 1rem 0 0;
		}

		@include break(mp){  
		  display: block;
		}

		a{
			color: $white;
			width: rem(60);
			height: rem(60);
			line-height: rem(60);
			text-align: center;
			padding: 0;
			display: block;
			text-decoration: none;
		}

		.icon{
			position: absolute;
			left: 50%;
			top: 50%;
			width: rem(38);
			height: rem(38);
			margin-top: rem(-38/2);
			margin-left: rem(-38/2);
			border-radius: 200%;
			@include transition(border-color 0.3s ease);
			z-index: 100;

			$icon-width: 60%;

			figure{
				position: relative;
				padding-top: 100%;
				@include transform(rotate(45deg) translateZ(0));
				@include transform-transition(0.15s ease);
				transition-timing-function: cubic-bezier(.42,0,.58,1);
				transform-style: preserve-3d; 
				backface-visibility: hidden;
				-webkit-transform-origin: 50% 50%;
				-ms-transform-origin: 50% 50%;
				transform-origin: 50% 50%;

				&:before,
				&:after{
					content: '';
					border-radius: 3px;
					background-color: $white;
					position: absolute;
					top: 50%;
					left: 50%;
					@include transition(background-color 0.3s ease);
					@include transform(translateX(-50%) translateY(-50%));
				}

				&:before{
					width: $icon-width;
					height: rem(2);
				}

				&:after{
					height: $icon-width;
					width: rem(2);
				}
			}
		}
	}

	.menu-button{
 		padding-left: 3px;
 		display: none;
 		position: absolute;
 		top: 1rem;
 		right: 1rem;

 		@include break(tl){
 			display: block;
 		}

 		a{
 			background-color: #666;
 			padding: 0;
 			font-size: 1rem;
 			height: rem(50);
 			line-height: rem(50);
 			width: rem(50);
 			text-align: center;
 			color: $white;

 			@include break(tl){
 				display: block;
 			}

 			@include break(tp){
 				width: rem(50);
 				height: rem(50);
 				line-height: rem(50);
 			}

 			&:hover{
 				color: $white;
 				background-color: lighten(#666, 5%);
 			}
 		}
 	}

 	// //////////////////////////////////////////
	// // MENU SEARCH WIDGET
	// //////////////////////////////////////////

 	.menu-search{
		margin: 0 0 2em;
		width: percentage(7/12);
		@include placeholder($white, 0.75, $body-font, 400);
		// -- COLOR, OPACITY, FONT, FONT-WEIGHT		

		@include break(tp){
			width: 100%;
		}
		
		form{
			margin: 0;
			padding: 0;

			.field-container{
				position: relative;
				overflow: hidden;
				@include flex;
			}
		}

		.search-submit{
			padding: 0;
			border: 0;
			font-size: 1rem;
			height: rem(48);
			width: rem(48);
			text-align: center;
			border-radius: 0;
			background-color: #666;
			color: $white;

			&:hover {
				background-color: lighten(#666, 10%);
				background-position: 0 100%;
			}
		}

		.text{
			border: 0;
			padding: 0.75rem;
			color: #555;
			border: 0;
			border-right: 0;
			background-color: lighten($black, 5%);

			@include placeholder($white, 0.75, $body-font, 400);
			// -- COLOR, OPACITY, FONT, FONT-WEIGHT

			&:focus{
				box-shadow: none;
				color: #555;
				background-color: lighten($black, 10%);
			}
		}


	}

 	.menu-social {
 		@extend .social;

		ul{

			> li{

				& + li{
					margin: 0;
					margin-left: 0.5rem;
				}
			}
		}
	}
	// END IF
}









