// Wrap for first and second level navigation at the top
.top-navigation-wrap {
	background-color: $white;
	background-color: rgba(255, 255, 255, 0.97);
	transition: box-shadow 0.2s linear;
	min-height: 85px;

	&.scrolling {
		@include box-shadow(0 5px 15px rgba(0, 0, 0, 0.15));
	}

	@media #{$screen-sm} {
		position: relative;
		margin-left: -15px;
		margin-right: -15px;

		&, &.scrolling {
			@include box-shadow(none);
		}
	}

	// Fix for menu position in neos backend
	.neos-backend:not(.neos-full-screen) & {
		top: 82px;
		@media #{$screen-sm} {
			top: auto;
		}
	}

	.neos-edit-preview-panel-open:not(.neos-full-screen) & {
		top: 182px;
		@media #{$screen-sm} {
			top: auto;
		}
	}

	.neos-inspector-panel-open:not(.neos-full-screen) & {
		right: 320px;
	}

	.neos-menu-panel-open:not(.neos-full-screen) &,
	.neos-navigate-panel-open:not(.neos-full-screen) & {
		left: 320px;
	}
}

// First level top navigation which can be toggled on small devices
.first-level-navigation {
	margin-top: 25px;
	margin-bottom: 0;

	a {
		font-size: 1.3em;
	}

	@media #{$screen-sm} {
		.nav-pills > li {
			float: none;
			margin-right: 0px;
		}
	}
}

// Second level navigation which is contained in the first level navigation and shown for small devices
.second-level-navigation {
	margin-left: 155px;
	margin-bottom: 0;
	min-height: 40px;
	padding-bottom: 8px;

	@media #{$screen-sm} {
		display: none;
	}

	.nav-pills > li {
		margin-right: 30px;

		& > a {
			font-size: 12px;
			line-height: 20px;
			@include font;
		}

		&:last-of-type {
			margin-right: 0;
		}
	}
}

// Neos logo
.navbar-brand {
	background-image: url('../Images/logo.png');
	background-repeat: no-repeat;
	background-size: 100px 32px;
	text-indent: -999px;
	width: 135px;
	height: 32px;
	margin-right: 20px;

	@media #{$screen-sm} {
		background-image: url('../Images/logo@2x.png');
		background-size: 100px 32px;
		margin-left: 20px;
	}
}

.navbar-default {
	background-color: transparent;
	border: none;

	.navbar-header {
		padding-bottom: 18px;
	}

	.navbar-toggle {
		background-color: $orange;
		outline: none;
		margin-top: 0;

		.icon-bar {
			background-color: $white;
		}
	}
}

// The bootstrap navbar has a height limit we don't want
.container .navbar-collapse {
	max-height: none;
	padding: 0;
	margin: 0;
}

@media #{$screen-sm} {
	.navbar-collapse {
		border-bottom: 1px solid transparent;
	}
}

.nav-pills > li {
	display: block;
	float: left;
	width: auto;
	margin-right: 55px;

	& + li {
		margin-left: 0;
	}

	&:last-of-type {
		margin-right: 0;
	}

	& > a {
		color: $textSubtle;
		font-size: 14px;
		line-height: 46px;
		@include font-bold;
		vertical-align: bottom;
		@include border-radius(0);
		padding: 0;
		text-decoration: none;

		&:hover {
			background-color: transparent;
			color: $grayDarker;
		}
	}

	&.active > a,
	&.current > a {
		&,
		&:hover,
		&:focus {
			color: $warning;
			background-color: transparent;
			@include border-radius(0);
		}
	}

	li {
		& > a {
			color: $textSubtle;
			font-size: 14px;
			@include font;

			&:hover {
				background-color: transparent;
				color: $grayDarker;
			}
		}

		&.active > a,
		&.current > a {
			&,
			&:hover,
			&:focus {
				color: $warning;
				background-color: transparent;
				@include border-radius(0);
			}
		}
	}
}

// The caret for dropdown menus
.nav {
	.caret {
		border-top-color: $grayMedium;
		border-bottom-color: $grayMedium;
	}

	.active .caret,
	.current .caret{
		border-top-color: $white;
		border-bottom-color: $white;
	}
}

// Second level navigation shown for bigger devices
.nav-tabs {
	border-bottom: none;

	& > li {
		margin-right: 55px;
		margin-bottom: 5px;

		& > a {
			padding: 0;
			text-decoration: none;
			border: none;

			&:hover {
				background-color: transparent;
				color: $grayDarker;
			}
		}

		&.current > a {
			color: $textSubtle;
			cursor: default;
			background-color: transparent;

			&,
			&:hover {
				color: $warning;
			}
		}
	}
}

// Footer navigation
footer.navbar {
	margin-top: 20px;
	margin-bottom: 0;
}