/**
 * 
 * 06. Site Header styles
 * 
 */


/** 06.01 Base nav li elements **/
.nav {
	> li > a {
		&:hover, &:focus {
			text-decoration: none;
			background-color: transparent;
		}
	}
	li .children > li:last-child {
		border-bottom: 0;
	}

	.menu-item-has-children {
		> a:after {
			@extend %ion;
			content: $ionicon-var-chevron-down;
			text-align: center;
			width:1.1em;
			opacity: 0.5;
			font-size: 1.1em;
			line-height: 1em;
			margin-left: 3px;
			@include transition(transform 0.2s $fn-cubic);
		}

		&:hover {
			> a:after {
				@include transform(rotate(45deg));
				content: $ionicon-var-plus;
			}
		}
	}

	.menu-item span.new-label {
		background-color: $color-primary; /* redux[background-color: main_theme_color] */
		color: #fff;
		padding: 1px 2px;
		font-size: 10px;
		position: relative;
		top: -1px;
		margin-left: 3px;
		border-radius: 1px;
	}
}


/** 06.02 site-header & site-navigation **/
.site-header {
	position: absolute;
	width: 100%;
	z-index: 1001;
	border-bottom-color: transparent;

	@include transition(transform $duration-transform $easing-transform, border-color 0.2s $fn-cubic 0.1s);

	&.full-width-menu .container {
		width: 100%;
		max-width: 100%; 
	}

	&.mm-fw-visible {
		overflow:hidden;	

		.site-navigation {
			transition-delay: 0s;
		}
	}
}

.site-navigation {
	position: relative;
	border-bottom: 0;
	font-size: 12px;
	opacity: 0; //show via js
	@include transition(background-color 0.2s $fn-cubic 0.1s, opacity 0.1s ease-in-out);

	.height-transition & {
		@include transition(height 0.3s $fn-cubic, background-color 0.2s $fn-cubic 0.1s, opacity 0.1s ease-in-out);
	}

	a {
		@include transition(color $duration-color $fn-cubic, padding $duration-color $fn-cubic);
		color: $color-light-gray;
	}

	> .container > .row {
		margin-left: 0;
		margin-right: 0;
	}

	.container {
		padding-bottom: 0px;
		@include box-sizing(padding-box);
	}

	.container .col-12 {
		padding: 0px;
	}

	&.sticky-navigation {
		z-index: 10;
		.navbar-nav > li > a {
			padding-bottom: 40px;
			padding-top: 40px;
		}
	}
}

.caret {
	display: none;
}

.no-header .main-content {
	padding-top: 0;
}


/** 06.03 Dropdowns **/
ul.sub-menu,
div.sub-menu,
.top-bar .sub-menu {
	@extend %dropdown-hidden;
	width: auto;
	max-width: 280px;
	padding: 2px 0px;
	border: 0;

	a, a:visited {
		color: $color-darker-gray;	
		background-color: transparent;	

		&:hover {
			color: $color-primary; /* redux[color: main_theme_color] */
		}
	}

	ul {
		width: auto;
		list-style: none;
		padding-left: 20px;
	}

	li {
		border-bottom: 1px solid rgba(255,255,255,0.1);
		font-weight: normal;
		line-height: 1.428571429;

		a {
			display: block;
			padding: 4px 12px;
			clear: both;
			white-space: nowrap;

			&:hover, &:focus {
				text-decoration: none;
				background-image: none;
			}

			&.wraptext {
				white-space: normal;
			}
		}

		&:last-child {
			border-bottom: 0;
		}
	}

	& > .active > a, 
	& > .active > a:hover {
		@extend .color-primary-ext-fg;
		background-color: initial;
	}

	.dropdown-submenu li {
		@include sub_li_ladder($color-lighter-gray, 0, 0, $color-lighter-gray);
	}

	.menu-item-has-children > a:after {
		display: none;
	}
}


/** 06.04 Header icons **/
header.site-header .header-icon {
	min-width: 40px;
	width: 1%;

	.navbar-nav {
		float: left;
		margin: 0;
	}

	.sub-menu {
		padding: 0;
	}

	> ul {
		display: inline-block;
		width: 100%;

		> li {
			width: 100%;
			text-align: center;

			> a {
				padding-left: 5px;
				padding-right: 5px;
			}

			i {
				font-size: 20px;
				line-height: 30px;
				vertical-align: middle;
				@include transition(color $duration-color $easing-transform);
			}

			svg {
				@include transition(fill $duration-color $easing-transform);
			}

			&:hover > a > i,
			&:focus > a > i,
			&:active > a > i,
			&:hover > a > div > i {
				color: $color-primary; /* redux[color: main_theme_color] */
			}

			&:hover > a > svg,
			&:focus > a > svg,
			&:active > a > svg,
			&:hover > a > div > svg {
				fill: $color-primary; /* redux[fill: main_theme_color] */
			}
		}
	}

	&.navbar-sep {
		padding-left: 8px;
		padding-right: 8px;
		text-align: center;

		&:after {
			content: '';
			position: absolute;
			top:50%;
			margin-top: -15px;
			height: 30px;
			width: 2px;
			background-color: $color-lighter-gray;
			opacity: 0.1;
		}
	}

	.product-count, .icon-counter {
		font-size: 80%;
		letter-spacing: 0;
		line-height: 18px;
		width: 18px;
		background-color: $color-primary; /* redux[background-color: main_theme_color] */
		color: #fff;
		border-radius: 100%;
		margin: 0;
		position: absolute;
		right: -2px;
		top: 50%;
		opacity: 0; 
		@include transform(scale(0.4));
		@include transition(all 0.2s ease-in-out);
	}

	.has-items .product-count {
		opacity: 1; 
		@include transform(scale(0.9));
	}

	&.header-search {
		.search-dropdown {
			position: absolute;
			top: 100%;
			background-color: #fff;
			right: 0;
			left: auto;
			width: auto;
			max-width: initial;

			form {
				min-width: 380px;

				.wrap-search {
					input {
						background-color: transparent;
					}
				}

				.wrap-submit {
					padding-left: 0;
				}
			}
		}

		&.force-show {
			.sub-menu {
				@extend %dropdown-visible;				
			}
		}

		@include until($bp-sm) {
			> .nav > li {
				position: static;
			}

			.search-dropdown {
				width: 100%;
				left: 0;
			}
		}

	}

	&.header-search,
	&.header-wishlist {
		@include until($bp-xxs) {
			display: none;
		}
	}

	> ul > li:hover {
		.sub-menu {
			@extend %dropdown-visible;
		}
	}
}


/** 06.05 Navbar + children **/
.navbar {
	position: relative;
	border: 0;
	border-radius: 0px;
	width: 100%;
	height: 120px;
	min-height: 25px;
	margin-bottom: 0px;
	display: table;

	.nav > li > a {
		@extend %simple-transition;
	}

	a, ul li a {
		@extend %uppercase;
		font-weight: 900;
		letter-spacing: 1px;
	}

	.navbar-header {
		width: 1%;
		text-align: left;

		@include until($bp-xs) {
			width: auto;
		}
	}

	.navbar-collapse {
		float: right;	
	}

	.navbar-toggle {
		border: 0;
		margin: 0;
		float: none;
		display: block;

		i.ion {
			display: none;
		}

		svg  {
			width: 19px;
			height: 19px;
			display: block;
			height: 30px;

			rect {
				will-change: transform;
				@include transition(transform $duration-transform $fn-cubic, opacity $duration-transform $fn-cubic);

				&:nth-child(1) {
					transform-origin: top left;
				} 

				&:nth-child(3) {
					transform-origin: bottom left;
				}
			}
		}

		&.open {
			svg {
				> rect:first-child {
					@include transform(translateX(100px) rotate(45deg));
				}

				> rect:nth-child(2) {
					opacity: 0;
				}

				> rect:nth-child(3) {
					@include transform(translateX(100px) rotate(-45deg));
				}
			}
		}
	}

	.navbar-header, 
	.navbar-collapse, 
	.navbar-elem, 
	.header-icon {
		display: table-cell;
		vertical-align: middle;
		float: none;
		height: 100%;
	}

	.navbar-nav {
		height: 100%;

		> .menu-item {
			> a {
				&:before {
					content: '';
					display: block;
					position: absolute;
					height: 2px;
					background-color: $color-primary; /* redux[background-color: main_theme_color] */
					width: 20px;
					left: 50%;
					bottom: 0;
					opacity: 0;
					@include transform(translate3d(-50%, 20px,0));
					@include transition(transform 0.2s $fn-cubic, opacity 0.2s $fn-cubic);
				}
			}

			&:hover,
			&.current-menu-item {
				> a:before {
					opacity: 1;
					@include transform(translate3d(-50%, 10px,0));
				}
			}

			&:hover {
				.sub-menu {
					@extend %dropdown-visible;
				}
			}

			&.featured {
				> a {
					border-radius: 3px;
					background-color: $color-primary; /* redux[background-color: main_theme_color] */
					margin-left: 15px;
					margin-right: 15px;
					@include transition(all $duration-color $fn-cubic);
					
					&:before {
						visibility: hidden;
					}	
				}
			}
		}


		> li {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			height: 100%;
			
			> a {
				padding: 5px 15px;
				line-height: initial;
				float: none;      
				@include transition(color $duration-color);
			}

			&.current_page_item > a {
				@extend .color-primary-ext-fg;
			}
		}

		> li:hover > a {
			@extend .color-primary-ext-fg;
		}
	}

	.navbar-brand {
		@include transition(padding $duration, max-width $duration);
		display: inline-block;
		float: none;
		padding: 7px 0;
		font-size: 28px;
		line-height: 26px;
		font-weight: 900;
		letter-spacing: -1px;
		height: auto;
		max-width: 300px;
		vertical-align: middle;


		@include until($bp-xs) {
			max-width: 100%;
		}

		.main-logo {
			display: block;
			max-height: 150px;
			width: 100%;
			position: absolute;
			top: 50%;
			@include transform(translateY(-50%));
			@include transition(opacity 0.1s $fn-cubic);

			&.transp-logo {
				opacity: 0;
			}
		}
	}

	.navbar-width-fix {
		display: none;
	}
}


/** 06.06 Mobile & auto-collapse **/
.site-navigation {
	.menu-mobile {
		@include at-least($bp-xs) {
			display: none;	
		}
	}

	&.menu-collapsed {
		.navbar-responsive-collapse {
			visibility: hidden;
			position: absolute;
			overflow: hidden;
		}

		.menu-mobile {
			display: table-cell;
		}

		.navbar-width-fix {
			display: table-cell;
			vertical-align: middle;
			float: none;
			height: 100%;
			width: 100%;
		}
	}
}


/** 06.07 Header's main color schemes **/
.site-header,
.site-header.solid-color,
.transparent-header .site-header.solid-color {
	.site-navigation {
		background-color: #FFF;

		.navbar {

			.navbar-nav > li > a {
				color: $color-darker-gray; /* header color (front) */
				fill: $color-darker-gray; /* header color (front) */
			}
			.navbar-brand {
				color: $color-darker-gray; /* header color (front) */
			}
			.navbar-toggle .icon-bar {
				background-color: $color-darker-gray; /* header color (front) */
			}
			.solid-logo {
				opacity: 1;
			}
			.transp-logo {
				opacity: 0;
			}

			.cart-icon.custom > img {
				display: block;
			}
			.cart-icon.custom > img.transparent-cart-icon {
				display: none;
			}

		}
	}
}


/** 06.08 Transparent header **/
.transparent-header .site-header {
	border-bottom-color: transparent;

	.site-navigation {
		background-color: transparent;
		border-bottom: none;
		box-shadow: none;
	}

	.site-navigation .navbar {
		.navbar-nav > li > a {
			color: #FFF; /* transp color (front) */
			fill: #FFF; /* header color (front) */
		} 
		.navbar-brand {
			color: #FFF; /* transp color (front) */
		}
		.navbar-toggle .icon-bar {
			background-color: #FFF; /* transp color (front) */
		}
		.solid-logo {
			opacity: 0;
		}
		.transp-logo {
			opacity: 1;
		}

		.cart-icon.custom > img {
			display: none;
		}
		.cart-icon.custom > img.transparent-cart-icon {
			display: block;
		}

	}
}

// header positioning
.header-over-content {
	&.has-sections {
		.container-sections section:first-child > .container {
			padding-top: $padding-content-top;
		}
	}
}


/** 06.10 Sticky header **/
.head-type-sticky {
	.header-scrolled {
		@include transform(translate3d(0, -$padding-content-top, 0));

		.top-bar {
			display: none;
		}

		@include until($bp-xs) {
			.navbar-header .navbar-toggle {
					margin: 0;
			}
	
			.nav > li > a:before {
				display: none;
			}
		}
	}

	.small-head-ready {
		@include transition(transform $duration-header-switch $fn-cubic, border-color 0.2s $fn-cubic 0.1s);
	}

	.head-sticky {
		position: fixed !important;
		width: 100%;

		.navbar {
			height: 30px; //default height
		}
	}

	.head-sticky-visible {
		@include transform(translate3d(0, 0, 0));
	}
}


/** 06.11 Mega menu **/
.site-navigation {
	.megamenu {
		> .sub-menu {
			left: 0;
			max-width: 100%;
			
			a {
				white-space: normal;
			}

			> li.menu-item {
				float: none;
				display: inline-block;
				border-bottom: 0;
				width: auto;
			}

			li.menu-item {
				border: 0;

				&.current-menu-item a {
					color: $color-primary; /* redux[color: main_theme_color] */
				}
			}

			> .dropdown-submenu {
				> ul {
					position: relative;
					
					&:after {
						content: '';
						position: absolute;
						right: 0; 
						margin-right: -4%;
						top: 0; 
						height: 100%;
						width: 2px;
						background-color: rgba(255,255,255,0.1);
					}
				}

				&:last-child ul:after {
					display: none;
				}
			}
		}

		/* 06.11.1 Full width mega menu  */
		&.fullwidth,
		&.submenu-too-big {
			ul {
				&.columns-1 > li {
					width: 100%;
				}
				&.columns-2 > li {
					width: 48%;
					margin-right: 4%;
				}
				&.columns-3 > li {
					width: 32%;
					margin-right: 2%;
				}
				&.columns-4 > li {
					width: 23.5%;
					margin-right: 2%;
				}
				&.columns-5 > li {
					width: 18.4%;
					margin-right: 2%;
				}
				&.columns-6 > li {
					width: 15%;
					margin-right: 2%;
				}
				&.columns-7 > li {
					width: 13%;
					margin-right: 1.5%;
				}
				&.columns-8 > li {
					width: 11.625%;
					margin-right: 1%;
				}
				&.columns-9 > li {
					width: 10.111%;
					margin-right: 1%;
				}
				&.columns-10 > li {
					width: 9.1%;
					margin-right: 1%;
				}

				li:last-child {
					margin-right: 0;
				}
			}
		}

		&.fullwidth {
			position: static;
			
			> .sub-menu {
				width: 100%;
				padding: 1em 0 2em 0;
				box-shadow: none;
				background-color: transparent;

				> li {
					display: block;
					float: left;
				}
			}

			&:hover {
				> ul.sub-menu {
					transition-delay: 0.1s;
				}
			}

			&.only-js-hover {
				&:hover {
					.sub-menu {
						visibility: hidden;
					}
				}
			}
		}

		/* 06.11.2 Auto width mega menu  */
		&.autowidth > .sub-menu {
			white-space: nowrap;
			padding: 1em;
			width: auto;
			max-width: none;

			> li {
				width: 180px;
				max-width: 180px; //To set a limit when .submenu-too-big applied
			}

			li.menu-item {
				vertical-align: top;
			}
		}

		> ul.sub-menu {
			.dropdown-submenu li {
				&:before, &:after {
					display: none;
				}

				a:hover {
					color: $color-primary;
				}
			}

			ul {
				padding: 0;

				li:last-child {
					padding-right: 0;
				}
			}

			> li {
				> a {
					//megamenu headings
					font-weight: 900;
					font-size: 90%;
					opacity: 0.3;
					color: $color-dark-gray;
					cursor: default;

					&:hover {
						color: $color-dark-gray !important; //to override hover color from custom css
						background-color: initial;
					}
				}

				&:last-child {
					ul {
						padding-right: 0;	
					}
				}
			}
		}
		
		&.submenu-too-big {
			position: static;

			> .sub-menu {
				width: 100%;
			}
		}

	}

	.navbar-left {
		.megamenu.autowidth > .sub-menu {
			left: 0;
			right: auto;
		}
	}

	.navbar-right {
		.megamenu.autowidth > .sub-menu {
			left: auto;
			right: 0;
		}
	}

	.navbar-center {
		.megamenu.autowidth > .sub-menu {
			right: 50%;
			left: auto;
			@include transform(translateX(50%));
		}
	}
}


/** 06.12 Top bar **/
.top-bar {
	@extend %uppercase;
	font-size: 11px;
	font-weight: 900;
	color: #FFF;
	background-color: $color-darker-gray;
	height: auto;
	line-height: 32px;

	> .container > .row {
		margin-left: 0;
		margin-right: 0;
		display: flex;
		align-items: flex-start;

		& > * {
			flex-grow: 1;
		}

		& .nav {
			flex-grow: 2;
		}
	}

	&.reverse {
		 > .container > .row {
			flex-direction: row-reverse;
		}

		.infolinks {
			text-align: right;
		}
	}


	.navbar-right {
		margin-right: 0;
		text-align: right;
	}

	.navbar-left {
		margin-left: 0;

		#topbar-menu {
			padding-left: 0;
			padding-right: 1em;
		}

		ul li:first-child {
			margin-left: 0;
			padding-left: 0;
		}
	}

	a {
		color: #FFF;
		font-weight: 900;
	}

	#topbar-menu {
		margin-bottom: 0;
	}

	ul li {
		list-style: none;
		position: relative;
		display: inline-block;
		padding-left: 10px;
		margin-left: 10px;

		&.menu-item {
			&.menu-item-has-children:before {
				@extend %dropdown-hidden;
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -3px;
				width: 0;
				border: 6px solid transparent;
				border-bottom: 6px solid #fff;
			}

			&:hover {
				&.menu-item-has-children:before {
					@extend %dropdown-visible;
				}

				.sub-menu {
					@extend %dropdown-visible;
				}
			}
		}

		&:hover > a {
			color: $color-primary; /* redux[color: main_theme_color] */
		}
	}

	&.reverse {
		.nav ul li {
			padding-left: 0;
			margin-left: 0;
			padding-right: 10px;
			margin-right: 10px;
		}
	}

	.sub-menu {
		margin-top: 0;

		a {
			color: $color-darker-gray;
		}
		
		li {
			display: block;
			padding-left: 0;
			margin-left: 0;
		}
	}

	ul.sub-menu {
		width: auto;  /* fix for megamenu width */
	}

	.transparent-header & { 
		background-color: rgba(0, 0, 0, 0.32);
		
		li:hover > a {
			
		}

		ul.sub-menu {
			li:hover > a {
				color: $color-darker-gray;
			}

			li:hover a:hover {
				color: $color-primary; /* redux[color: main_theme_color] */
			}
		}

		ul.sub-menu a {
			color: $color-darker-gray;

			&:hover {
				color: $color-primary; /* redux[color: main_theme_color] */	
			}
		}
	}

	&.temp-fix-block {
		display: block !important;
    	position: absolute;
    	width: 100%;
    	visibility: hidden;
	}
}


/** 06.13 Side panels **/
.side-panel-menu {
	@include transition(transform $side-panel-menu-duration linear, opacity 0s $side-panel-menu-duration, visibility 0s $side-panel-menu-duration);
	@include transform(translate3d(-$side-panel-left-width,0,0));
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: $side-panel-left-width;
	max-width: 100%;
	z-index: 1020;
	overflow-x: auto;
	overflow-y: scroll;
	opacity: 0;
	padding-bottom: 3em;
	visibility: hidden;
	background-color: $color-mobile-menu-bg;
	box-shadow: 0 0 20px rgba(85, 85, 85, 0.5);
	will-change: transform, opacity; // Stops re-painting on scroll

	touch-action: pan-y;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-overflow-scrolling: touch;

	> * {
		will-change: transform; // Stops re-painting on scroll
	}

	&.left {
		@include transform(translate3d(-$side-panel-left-width,0,0));
		left: 0;
		right: auto;
	}

	&.right {
		@include transform(translate3d($side-panel-right-width,0,0));
		left: auto;
		right: 0;
	}

	&.open {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	.side-panel-widgets {
		padding: 2em 3em;

		@include until($bp-xxs) {
			padding: 2em;
		}
	}

	&::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important
	}

	.search-form.ajax-search {
		> div {
			display: flex;
			flex-direction: column;
		}

		.wrap-submit {
			display: none;
		}

		.wrap-results {
			position: relative;
		}
	}
}

#left-side-panel {
	overflow: hidden;
	padding-bottom: 0; 

	.side-panel-widgets {
		overflow: auto;
		height: 100%;
		padding: 0 0 3em 0;

		touch-action: pan-y;
		user-select: none;
		-webkit-user-drag: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-overflow-scrolling: touch;

		> * {
			will-change: transform; // Stops re-painting on scroll
		}

		&::-webkit-scrollbar {
			width: 0 !important;
			height: 0 !important
		}
	}
}

#right-side-panel {
	width: 100%;
	max-width: $side-panel-right-width;
}

.cart-sidepanel {
	padding: 2em 1.5em;
	line-height: 22px;

	.row {
		margin-bottom: 0.5em;
		border-bottom: 1px solid #ddd;
		
		&:last-child {
			border-bottom: 0;
		}
		> div {
			padding-left: 10px;
			padding-right: 10px;
		}
	}
}

.side-panel-menu.left {
	ul.nav {
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
		font-size: 14px;

		li {
			&:before,
			&:after {
				display: none;
			}
		}

		a {
			display: block;
			padding: 0.9em 1.5em;
			font-weight: 900;
			color: $color-darker-gray;
			
			&:visited {
				color: $color-darker-gray;
			}
			
			&:hover,
			&:focus,
			&:active {
				text-decoration: none;
				color: #fff;
				background-color: $color-primary; /* redux[background-color: main_theme_color] */
			}
		}

		.active a {
			border-color: $color-primary; /* redux[border-color: main_theme_color] */
			border-right-width: 2px;
			border-right-style: solid;
			background-color: darken( $color-mobile-menu-bg, 5% );
			color: $color-darker-gray;
		}

		.menu-item-has-children > a:after {
			display: none;
		}

	}

	.megamenu {
		> ul > li > a { // Megamenu headings
			opacity: 0.5;
			font-size: 95%;
			padding-top: 0;
			padding-bottom: 0;
			margin-top: 1em;
		}
	}
	
	.main-menu {
		@extend %uppercase;
	}

	.secondary-menu .nav {
		li {
			a {
				padding: 0.5em 1.5em;
				opacity: 0.7;
			}
		}
	}

	.navbar-brand {
		@extend %uppercase;
		width: 100%;
		height: auto;
		font-weight: 900;
		margin: 2em 0;
		padding: 0 1.1em;
		color: $color-darker-gray;
	}

	.caret {
		display: inline-block;
		opacity: 0.5;

		&:before {
			@include transition(transform $duration-transform);
		}
	}

	.dropdown-backdrop {
		display: none;
	}

	li.menu-item-has-children {
		.sub-menu {
				display: none;
				opacity: 1;
				visibility: visible;
		}

		&.dropdown-open {
			.caret:before {
				@include transform(rotate(180deg));
			}
		}
	}  

	.yith-ajaxsearchform-container {
		.wrap-submit {
			display: none;
			padding-left: 0;
		}

		.wrap-search:after {
			right: 20px;
		}
	}

	input,
	.autocomplete-suggestion {
		padding-left: 1.5em;
	}
}

.side-panel-menu {
	.nav .sub-menu {
		position: relative;
		width: initial;
		max-width: 100%;
		top: initial;
		left: 0;
		z-index: 0;
		float: none;
		min-width: initial;
		padding: 0;
		margin: 0;
		list-style: none;
		background-clip: padding-box;
		border: 0;
		border-radius: 0;
		box-shadow: inset 0px 15px 21px -15px rgba(0,0,0,0.1), inset 0px -15px 21px -15px rgba(0,0,0,0.1);
		background-color: #D7D7D7;

		li {
			border: 0;
		}

		ul {
			padding-left:1em;
			margin-bottom: 0;
		}

		a {
			display: block;
			padding: 0.9em 2em;
			white-space: normal;

			&:active,
			&:focus {
				@extend .color-primary-ext-bg;
				@extend .color-secondary-ext-fg;
			}
		}
	}

	.close-side-panel {
		position: absolute;
		top: 1em;
		right: 1.25em;
		font-size: 26px;
		width: 35px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		cursor: pointer;
		z-index: 10;
		display: none;

		&:hover,
		&:focus,
		&:active {
			color: $color-primary; /* redux[color: main_theme_color] */
		}

		@include until($bp-xxs) {
			right: 0.8em;
		}

		@include until($bp-xs) {
			display: block;
		}
	}
}

// Overlay over content when sidepanel open 
.content-dim-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 1010;
	opacity: 0;
	visibility: hidden;
	@include transition(transform $duration-transform $easing-transform, opacity $duration-transform, visibility 0s $duration-opacity);
}

.side-menu-open {
	.content-dim-overlay {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	.side-panel-menu.open {
		@include transform(translate3d(0,0,0));
	}
}

// Fixes for when admin-bar visible
@include until(600px) {
	.admin-bar header.head-sticky {
		top: 0;
	}
}

.admin-bar .side-panel-menu {
	margin-top: 32px;

	@include until(600px) {
		margin-top: 0;
	}
}