.navbar {
	border: 0;
	transition: box-shadow $default-transition-time;
}

.navbar-collapse {
	@media (max-width: $grid-float-breakpoint) {
		box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
	}
}

.navbar-container {
	max-width: 1600px;
}

.navbar-brand {
	position: relative;
	vertical-align: center;
}

.navbar-brand > .connecting {
	text-shadow: 0 0 1px $green-dark;
}

.navbar-brand > .no-connection {
	text-shadow: 0 0 1px $red;
}

.navbar-brand > img {
	bottom: 15px;
	display: inline-block;
	height: 49px;
	position: relative;
}

.site-name {
	font-size: x-large;
	transition: text-shadow $default-transition-time;
	vertical-align: top;
}

.site-stage {
	@include td-pos(right, 1em);
	bottom: 2px;
	color: $gray-dark;
	font-size: small;
	font-weight: bold;
	position: absolute;
	transform: rotate(345deg);
	transition: text-shadow $default-transition-time;
}

.navbar-brand:hover {
	text-shadow: rgba(0, 0, 0, .25) 1px 1px 1px;
}

.navbar-brand:hover > .site-name,
.navbar-brand:hover > .site-stage {
	color: $white;
}

.navbar-link {
	cursor: pointer;
	font-size: large;
	transition-duration: $default-transition-time;
	transition-property: #{'background-color, box-shadow, text-shadow'};

	&:hover {
		text-shadow: rgba(0, 0, 0, .25) 1px 1px 1px;
	}

	@media (max-width: $grid-float-breakpoint) {
		border-bottom: 1px solid $navbar-default-border;
	}
}

.nav-marker-bar {
	background-color: transparent;
	bottom: -6px;
	height: 6px;
	left: 0;
	opacity: 0;
	position: absolute;
	transition-duration: $default-transition-time;
	transition-property: #{'background-color, opacity'};
	width: 100%;
}

.nav-marker-caret {
	border: 5px solid;
	border-color:	transparent transparent $body-bg;
	bottom: 0;
	box-shadow: 0 5px 5px -5px $white;
	height: 0;
	left: 50%;
	opacity: 0;
	position: absolute;
	transition: opacity $default-transition-time;
	width: 0;
}

.navbar-link-active .nav-marker-caret {
	@media (min-width: $grid-float-breakpoint) {
		opacity: 1;
	}
}

.navbar-link-active.calendar-link > .nav-marker-caret {
	border-bottom-color: $calendar-nav-bg;
}

.navbar-link-active.calendar-link.navbar-link-covering > .nav-marker-bar {
	background-color: $calendar-nav-bg;
	opacity: 1;
}

.navbar .navbar-nav:first-child,
.navbar .navbar-nav:last-child {
	margin-bottom: 0;
	margin-top: 0;
}

.navbar .navbar-nav > .open > .dropdown-menu {
	@media (min-width: $grid-float-breakpoint) {
		padding-top: 10px;
		z-index: -1;
	}

	@media (max-width: $grid-float-breakpoint) {
		background-color: $dropdown-bg;
		box-shadow: 0 0 5px rgba(0, 0, 0, .3) inset;
		padding: 0;
	}
}

.navbar .navbar-nav > .open > .dropdown-menu > li > a {
	@media (max-width: $grid-float-breakpoint) {
		border-bottom: 1px solid darken($dropdown-bg, 10%);
		color: $dropdown-link-color;
	}
}

.navbar .navbar-nav > .open > .dropdown-menu > li > a:last-child > a {
	@media (max-width: $grid-float-breakpoint) {
		border-bottom: 0;
	}
}

.navbar .navbar-nav > .open > .navbar-link,
.navbar .navbar-nav > .open > .navbar-link:hover,
.navbar .navbar-nav > .open > .navbar-link:focus {
	background-color: lighten($navbar-default-bg, 10%);
	box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.navbar .navbar-nav > .open > .navbar-link > .nav-marker-caret {
	opacity: 0;
}

.navbar .navbar-nav > .open > .navbar-link > .nav-marker-bar {
	@media (min-width: $grid-float-breakpoint) {
		background-color: $dropdown-bg;
		opacity: 1;
	}
}

.navbar-covering {
	box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.navbar-covering .nav-marker-caret {
	opacity: 0;
}

.navbar-covering .navbar-link-active,
.navbar-covering .navbar-nav > li > .navbar-link-active:hover,
.navbar-covering .navbar-nav > li > .navbar-link-active:focus {
	background-color: lighten($navbar-default-bg, 10%);
	box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.navbar-form-selection {
	font-size: large;
	margin: 0;
	padding: 0;

	@media (min-width: $grid-float-breakpoint) {
		padding: 8.5px 0;
	}
}

.navbar-form-selection > .fa {
	color: $white;

	@media (max-width: $grid-float-breakpoint) {
		display: none;
	}
}

.navbar-form-selection > .form-control {
	@media (max-width: $grid-float-breakpoint) {
		height: 100%;
		width: 100%;
	}
}

.navbar .js-region-search-form {
	display: inline;
}

.language-name {
	display: inline-block;
}

.language-translated {
	@include td-float(right);
	color: $gray-light;

	&::after {
		content: '%';
	}

	&.well-translated {
		color: $green-darker;
	}
}

.js-language-link:hover .language-translated {
	color: $white;
}
