// Navbar
.navbar {
	border: none;
	border-bottom: 1px solid $main-color-gray-100;

	height: $header-navbar-height;

	@media screen and (max-width: 767px){
		justify-content: flex-start;

		>.container {
			display: flex;
			justify-content: flex-start;
			width: 100%;
		}
	}
}

.navbar-alv {
	padding: 0 $navbar-padding-x;

	.nav-item {
		padding-top: $navbar-padding-y;
		padding-bottom: $navbar-padding-y;
	}
}

.navbar-light.bg-faded {
	background-color: rgba($main-color-gray-100, 1);
}

.navbar-brand {
	@media screen and (min-width: 768px){
		&.alv-logo {
			position: absolute;
			top: 0;
			z-index: $logo-zIndex;
		}
	}
}

// todo refactoring
.navbar-nav {

	.nav-link {
		padding-right: 1em !important;
		padding-left: 1em !important;

		// todo vars
		margin-right: .5rem;
		margin-left: .5rem;

		&:hover,
		&.active {
			color: $body-color !important;
			background: $body-bg;
		}

		&.nav-link--login {
			background: $brand-primary;
		}
	}

	.nav-link.nav-link--login {
		padding-right: 1.75em !important;
		padding-left: 1.75em !important;

		background: $brand-primary;
		color: theme-color('light');

		&:hover,
		&.active {
			background: rgba($brand-primary, .8);
			color: theme-color('light') !important;
		}

		.nav-link--login__icon {
		 	display: none;
		}

		@media screen and (max-width: 479px){
			.nav-link--login__icon {
				display: inline-block;
			}

			.nav-link--login__label {
				display: none;
			}
		}
	}

	@media screen and (max-width: 479px){
		&.navbar-nav--alv {
			display: inline-flex;
			flex-direction: row;
		}
	}
}

// Icons
.nav-link {
	//color: $brand-primary;

	.nav-link__icon {
		border: 2px solid $brand-primary;
		display: inline-block;
		border-radius: 50%;
		padding: 2px;

		.icon__stack {
			border-radius: 50%;
			height: 2.5em;
			width: 2.5em;
			display: inline-block;
			line-height: 2.5em;
			text-align: center;
			background-color: transparent;

			font-size: 1.25em;
			color: inherit;
		}
	}
}

.active,
.active > .nav-link,
.nav-item:hover,
.nav-link:hover {
	.nav-link__icon {
		border: 2px solid $brand-primary;
		display: inline-block;
		border-radius: 50%;
		padding: 2px;

		.icon__stack {
			border-radius: 50%;
			height: 2.5em;
			width: 2.5em;
			display: inline-block;
			line-height: 2.5em;
			text-align: center;
			background-color: $brand-primary;

			font-size: 1.25em;
			color: white;
		}
	}
}

// Language Switcher
// todo refactoring
// nav-item same width!
.navbar--language-switcher > .nav-item {
	font-size: $small-font-size;

	padding: 0;

	.nav-link {
		padding-top: 0.75em;
		padding-bottom: 0.75em;

		padding-right: .5rem !important;
		padding-left: .5rem !important;

		margin-right: 0;
		margin-left: 0;
	}

	&.active > .nav-link {
		font-weight: 700;
	}
}


// NAVBAR-TOGGLER
.navbar-toggler {
	border: none;
	padding: 0;
	margin: $navbar-toggler-padding-y $navbar-toggler-padding-x $navbar-toggler-padding-y 0;
}

// language-switcher

.language-switcher {

	.dropwdown--language-switcher {
		display: none;
	}

	@media screen and (max-width: 767px){
		.navbar--language-switcher {
			display: none;
		}

		.dropwdown--language-switcher {
			display: inline-block;
		}
	}
}

@media screen and (max-width: 767px){
	.navbar-nav {

		.nav-link {
			margin-right: 0 !important;
			margin-left: 0 !important;
		}

		&.mobile-nav {
			flex-direction: row;

			.navbar--language-switcher {
				.nav-item:not(.active) {
					display: none;
				}
			}
		}
	}

	.navbar-alv {
		padding: 0 $navbar-padding-x/2;

		.nav-item {
			padding-top: $navbar-padding-y/2;
			padding-bottom: $navbar-padding-y/2;
		}
	}

}


@media screen and (min-width: 480px) and (max-width: 1024px) {
	.navbar-nav {

		.nav-link {
			padding-right: .5em !important;
			padding-left: .5em !important;

			// todo vars
			margin-right: 1px;
			margin-left: 1px;
		}

		.nav-link.nav-link--login {
			padding-right: .75em !important;
			padding-left: .75em !important;
		}
	}
}