// Subnavbar
.subnavbar-nav {
	flex-direction: column;
	padding-bottom: $alv-box-radius;
	margin-bottom: $margin-x-general;

	background: $main-color-gray-lightest;
	@include alv-border-radius($alv-box-radius);

	.nav-title {
		display: block;
		padding: $nav-link-padding;
		margin-bottom: $margin-x-narrow;

		font-weight: $text-weight-light;

		border-bottom: 1px solid $main-color-gray-100;

		.nav-link--faq {
			color: $nav-link-disabled-color;
			font-size: 1rem;
			display: inline-block;
			padding: 0.125em;

			float: right;

			&:hover {
				text-decoration: none;
				background: $gray-200;
				color: $body-color;
			}
		}
	}

	.nav-item {
		font-size: $small-font-size;
	}


	.nav-link {
		color: $body-color;

		&:hover {
			background: $main-color-gray-100;
			color: $body-color;
		}

		&.disabled {
			color: $nav-link-disabled-color;
		}
	}

	.nav-item.active > .nav-link {
		font-weight: $text-weight-bold;
		box-shadow: inset $subnav-link-active-border 0 0 0 $brand-primary;
	}

	.nav {
		font-size: 1rem;

		.nav-link {
			//color: $main-color-gray-300;
			color: $main-color-gray-400;

			padding: $nav-link-padding-y calc(#{$nav-link-padding-x} + 0.5rem);

			&:hover {
				color: $brand-primary;
			}
		}
	}
}

.filter-nav {
	font-size: $small-font-size;
	margin-bottom: $margin-x-narrow;

	.nav-link {

		&:hover {
			background: $main-color-gray-100;
			color: $brand-primary;
		}

		&.active {
			font-weight: $text-weight-bold;

			box-shadow: none;
		}
	}

	.nav-title {
		display: block;
		font-weight: $text-weight-bold;
		padding: $nav-link-padding-y $nav-link-padding-x 0 $nav-link-padding-x;
	}
}

@media screen and (min-width: 480px){
	.subnavbar__toggler {
		display: none;
	}
}


@media screen and (max-width: 479px){

	.subnavbar {

		margin-right: ($grid-gutter-width / -2);
		margin-left:  ($grid-gutter-width / -2);

		margin-bottom: $margin-x-narrow;

		transition: all 1s ease;

		>.subnavbar__toggler {
			background-color: $main-color-gray-100;
			margin-bottom: 0;
			padding: .5rem;

			text-align: center;
			cursor: pointer;

			font-weight: 400;

			&:before {
				display: inline-block;
				margin-right: .5em;
				vertical-align: -0.05em;

				font-family: FontAwesome;
				font-size: 1.125em;
				content: '\f13a';
			}
		}
	}

	.subnavbar:not(.show) {

		.active {
			font-size: $h4-font-size;
			text-align: center;

			> .nav-link {
				font-weight: $text-weight-regular;
				box-shadow: none;
				color: $link-color;
			}
		}

		.nav-item:not(.active),
		.nav-title:not(.active) {
			display: none;
		}
	}

	.subnavbar-nav {
		background-color: $main-color-gray-100;
		border-radius: 0 !important;

		padding-bottom: 0;
		margin-bottom: 0;

		.nav-title {
			font-size: $h4-font-size;

			margin-top: $margin-x-narrow;
			border-bottom: 1px solid $main-color-gray-400;
		}

		.nav-item {
			font-size: $font-size-base;
		}

		&.md-whiteframe-1dp {
			box-shadow: none;
		}
	}

}

.subnavigation {

	&.navbar-light {
		background: $white;
	}

	.navbar-nav {
		margin-left: calc(#{$logo-width} + #{$navbar-padding-x});
		font-size: $small-font-size;
	}
}