/*	Toggle Menu
-------------------------*/
.navbar-toggler,
.toggler-menu {
	width: 40px;
    height: 40px;
    position: relative;
    margin: 0;
    border-radius: 0;
    padding: 0;
    margin-left: 15px;
	background: $px-theme;
	border: none;
	span {
		position: absolute;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    width: 25px;
	    height: 2px;
	    margin: auto;
	    box-shadow: 0px -8px 0 0px currentColor, 0px 8px 0 0px currentColor;
		background: $px-white;
		color: $px-white;
	}
}

.mob-header {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 3;
	left: 0;
	padding: 6px 10px;
	background: $px-white;

	.toggler-menu {
		margin-left: auto;
	}

	.navbar-brand {
		font-size: 20px;
		a {
			color: $px-theme;
			font-weight: 600;
		}
	}
	@include up-md {
		display: none;
	}
}


/* Side Menu
-----------------------------*/
.header-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 95px;
    background: $px-white;
    overflow: hidden;
    border-radius: 0;
    bottom: 0;
    box-shadow: 0px 3px 10px 0px rgba(38, 59, 94, 0.29);
    z-index: 3;
    @include down-md {
    	@include transition(ease all 0.35s);
    	left: -150px;
    	&.menu-open {
    		left: 0;
    	}
    }
    .navbar-brand {
    	margin: 0;
    	text-align: center;
    	width: 100%;
    	padding: 0;
		a {
    		padding: 10px 0;
	    	background: $px-theme;
		    font-weight: 600;
			font-size: 14px;
			color: $px-white;
			display: block;
		}
    }
	.nav {
		li {
			width: 100%;
			text-align: center;
			a {
			    font-size: 12px;
			    font-weight: 500;
			    padding: 10px 0;
			    display: block;
			    position: relative;
			    border-bottom: 1px solid rgba($px-dark, 0.06);
			    text-transform: uppercase;
			    letter-spacing: 0.055rem;
			    color: $px-dark;
			    &:after {
		    	    content: "";
				    position: absolute;
				    right: 0;
				    width: 2px;
				    height: 0;
				    background: $px-theme;
				    top: auto;
				    bottom: 0;
				    @include transition(ease all 0.35s); 
			    }
			    i {
			    	font-size: 20px;
			    	width: 100%;
			    }
			    &.active,
			    &:hover {
			    	color: $px-theme;
			    }
			    &.active {
			    	&:after {
			    		height:100%;
			    		bottom: auto;
			    		top: 0;
			    	}
			    }
			}
		}
	}
}


/* Header Dark
-----------------------------*/
@include up-md {
	.header-dark {
		padding: 0;
		background: rgba($px-white, 0.72);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 5;
		.fixed-header & {
			background: $px-white;
		}
		&.header-transparent {
			background: transparent;
			.fixed-header & {
				background: $px-white;		
			}
		}
		.navbar-brand {
			font-weight: 600;
			font-size: 24px;
			text-transform: uppercase;
			color: $px-dark;
		}
		.navbar-nav {
			.nav-link {
				line-height: 60px;
			    padding: 0 10px !important;
			    font-size: 13px;
			    font-weight: 500;
			    text-transform: uppercase;
			    letter-spacing: 0.035rem;
			    color: $px-dark;
			    margin-left: 10px;
			    &.active,
			    &:hover {
			    	color: $px-theme;
			    }
			}
		}
	}
}

/* Header Dark
-----------------------------*/
@include up-md {
	.header-white {
		padding: 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 5;
		.fixed-header & {
			background: $px-white;
		}
		.navbar-brand {
			font-weight: 600;
			font-size: 24px;
			text-transform: uppercase;
			color: $px-white;
			.fixed-header & {
				color: $px-dark;
			}
		}
		.navbar-nav {
			.nav-link {
				line-height: 60px;
			    padding: 0 10px !important;
			    font-size: 13px;
			    font-weight: 500;
			    text-transform: uppercase;
			    letter-spacing: 0.035rem;
			    color: rgba($px-white, 0.7);
			    margin-left: 10px;
			    .fixed-header & {
			    	color: $px-dark;
			    }
			    &.active,
			    &:hover {
			    	color: $px-white;
			    	.fixed-header & {
			    		color: $px-theme;
			    	}
			    }
			}
		}
	}
}


/* Mobile 
-----------------------------*/
@include down-md {
	.header-nav {
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    z-index: 5;
	    .fixed-header & {
	    	background: $px-white;
	    }
		.navbar-brand {
			font-weight: 600;
			font-size: 24px;
			text-transform: uppercase;
			color: $px-dark;
		}
		&.header-white {
			.navbar-brand {
				color: $px-white;
				.fixed-header & {
					color: $px-dark;
				}
			}
		}
		.navbar-nav {
			padding: 8px 15px;
		    border: 1px solid #ddd;
			background: $px-white;
			> li {
				+ li {
					.nav-link {
						border-top: 1px solid #ddd;		
					}		
				}
			}
			.nav-link {
			    font-size: 13px;
			    font-weight: 500;
			    text-transform: uppercase;
			    letter-spacing: 0.035rem;
			    color: $px-dark;
			    &.active,
			    &:hover {
			    	color: $px-theme;
			    }
			}
		}
	}
}