// Navigation styles

// General
.navbar {
	background-color: $white;
	box-shadow: 0 0 16px rgba(#000, 0.1);
}

// Nav logo
.navbar-brand {
	margin: 0;
	padding: 0;
	@include transition(0.6s);

	img {
		height: 72px;
	}
}

// Toggler
.navbar-toggler {
	outline: none !important;
	padding-left: 8px;
	padding-right: 8px;

	.navbar-toggler-icon {
		height: 18px;

		.toggler-bar {
			background-color: $red;
			border-radius: 2px;
			transform: none;
			@include transition(0.6s);
			width: 30px; height: 3px;

			+ .toggler-bar {
				margin-top: 6px;
			}
		}
	}
}

// Nav bar
#navbar {
	background-color: rgba($white, 0.95);
	opacity: 0;
	transform: translateX(100%);
	position: fixed;
	bottom: 0; left: 0;
	height: calc(100% - 76px);
	@include transition(1s);


	ul li, ul li a, i {
		color: $gray-500 !important;
	}
	> ul {
		margin: 0;
		@include transition(0.6s);

		li {

			a {
				text-decoration: none !important;
				@include transition(0.15s);
			}
		}
	}
	#nav-primary, #locale-select, #nav-social, #head-login {
		position: absolute;
	}
	#locale-select, #nav-social, #head-login {
		bottom: 16px;
	}
	#nav-primary {
		top: 50%; left: 50%;
		text-align: center;
		transform: translate(-50%, -60%);

		li a {
			cursor: pointer;
			font-size: 26px;
		}
		.dropdown-menu {
			background-color: transparent;
			border: none;
			border-radius: 0;
			display: block;
			margin: 0;
			opacity: 0;
			pointer-events: none;
			position: absolute;
			left: 50%; top: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			@include transition(0.6s);
			z-index: -1;

			.dropdown-item {

				&:focus, &:hover {
					background-color: transparent;
				}
			}
			&:before {
				opacity: 0;
				@include transition(0.6s);
			}
			&.show {
				opacity: 1;
				pointer-events: auto;
				transform: translate(calc(-50% + 50vw), -50%);

				&:before {
					opacity: 1;
				}
			}
		}
		&.dropdown-shown {
			transform: translate(calc(-50% - 50vw), -60%);

			> li > a {
				opacity: 0.5;
			}
		}
	}
	#locale-select {
		left: 12px;
		cursor: pointer;
		list-style-type: none;
		overflow: hidden;
		padding: 8px;
		height: 40px;
		@include transition(0.6s);

		li {
			margin-left: 0;
			opacity: 0;
			padding: 0 8px;
			@include transition(0.6s);

			&.active-locale {
				font-weight: $bold;
				opacity: 1;
				padding-right: 24px;
			}
			+ li {
				margin-top: 16px;
			}
		}
		i {
			color: $white;
			position: absolute;
			top: 12px; right: 8px;
			transform: rotate(-180deg);
			@include transition(0.6s);
		}
		&.open {
			height: 120px;

			li {
				opacity: 1;
			}
			i {
				transform: none;
			}
		}
	}
	#nav-social {
		bottom: 12px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		right: 14px;
		width: 112px;

		li {
			
			a {
				padding-right: 3px;
				padding-left: 3px;

				i {
					font-size: 24px;
				}
			}
			+ li {
				margin-left: 8px;
			}
		}
	}
	#head-login {
		left: 50%;
		padding-left: 18px;
		padding-right: 18px;
		transform: translateX(-50%);

		&:after {
			display: none;
		}
	}
}

// Open on mobile/tablet
.navbar.nav-open {
	background: rgba($white, 0.95);
	padding-bottom: 8px;

	.navbar-brand svg path {
		fill: $red !important;
	}
	#navbar {
		opacity: 1;
		transform: translateX(0);
	}
	.navbar-toggler .navbar-toggler-icon .toggler-bar {
		background-color: $gray-500;

		&:nth-of-type(1) {
			transform: rotate(45deg) translate(6px, -1px);
			width: 18px;
		}
		&:nth-of-type(2) {
			opacity: 0;
		}
		&:nth-of-type(3) {
			transform: rotate(-45deg) translate(6px, 1px);
			width: 18px;
		}
	}
}


// Member bar
#member-bar {
	background-color: $red;
	color: $white;
	padding: 5px 15px;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 9999;

	.member-bar-info {
		float: left;

		p {
			font-size: 12px;
			line-height: 1.2;
			margin: 0;
		}
	}
	.btn {
		font-size: 12px !important;
		float: right;
		height: auto;
		margin-top: 5px;
		padding: 10px 20px;
	}
}


// Member bar conditionals
.member-site {
	padding-top: 128px;

	.navbar {
    	top: 52px;

    	#navbar {
    		height: calc(100% - 130px);
    	}
    }
}