
/* Top Bar: Generics */
$navbar-light-active-color: $dark
$navbar-active-color: $navbar-light-active-color
$navbar-bg-color: white

$navbar-secondary-bg-color: $light
$navbar-button-line-width: -2px

.navbar
	@extend .align-items-center
	background-color: $navbar-bg-color
	border: none
	color: $color-text
	@extend .d-flex
	@extend .mb-0
	z-index: 9 !important // Top level, above all. Other levels override this with !important

	// icons in entries
	ul > li > a > i
		font-size: .9em
		padding-right: 10px
		max-width: 22px
		width: 22px

	ul li a:hover
		text-decoration: none

	.navbar-btn
		+media-xs
			position: absolute
			right: 0

	&.navbar-primary
		transition: top 150ms ease-in-out, box-shadow 1s ease-in-out

		ul.navbar-nav > li:last-child
			@extend .nav-cta

	&.navbar-hidden
		box-shadow: none
		top: -60px

	// Second and third level navigation headers, below the header
	&.navbar-secondary
		background-color: $navbar-secondary-bg-color
		box-shadow: inset 0 -1px 0 0 rgba(black, .1)
		min-height: initial
		z-index: 8 !important // First level is 9

		ul.navbar-nav > li
			+media-xs
				flex: 1
				flex-wrap: wrap
				white-space: nowrap

			> a
				@extend .align-items-center
				@extend .d-flex
				height: 100%
				justify-content: center
				padding: 14px 15px 10px

				+media-xs
					padding: 15px 20px

	// Overlay background
	&-overlay // .navbar-overlay
		background-color: rgba(255,255,255,0)
		width: 100%
		height: 100%
		position: absolute
		top: 0
		left: 0
		right: 0
		bottom: 0
		z-index: 0

	&-logo-blender // .navbar-logo-blender
		background-image: url("data:image/svg+xml;base64,[encoded data, 9588 characters]")
		background-repeat: no-repeat
		background-size: 100%
		display: inline-block
		height: 40px
		margin-right: auto
		transition: opacity 150ms ease-in-out
		width: 132px

		&:hover
			opacity: .8

	// The logo
	&-brand // .navbar-brand
		color: $color-text

		&:hover
			opacity: .9
			transition: opacity 0.1s ease

	// Mobile version of the menu
	&-collapse // .navbar-collapse
		+media-xs
			&.collapse, &.collapsing
				background-color: $color-background-light
				bottom: 0
				max-height: initial
				overflow-y: auto
				position: fixed
				right: 0
				top: 56px
				transition: none
				width: 100%

				a.nav-link
					margin: 0 15px

				.navbar-nav
					flex-direction: column !important

	.container
		+media-xs
			margin: 0
			padding: 0

		@extend .align-items-center
		@extend .d-flex
		justify-content: flex-end
		height: 100%

	ul.navbar-nav
		@extend .flex-row
		@extend .flex-wrap

		+media-sm
			margin-bottom: 0
			max-width: 105%

		.dropdown-menu li
			+media-sm
				margin: 10px 0 10px -15px
				font-size: 110%
		/* Otherwise navbars with many items overlap the Email on BID enabled sites */

		// First items on the list
		> li
			&:after
				display: none // hide bullets

			&:focus > a,
			&:hover > a
				box-shadow: inset 0 $navbar-button-line-width rgba($primary, .8)
				color: lighten($primary, 15%)

			> a
				color: $nav-link-disabled-color
				transition: color 100ms ease-in-out, box-shadow 150ms ease-in-out

			&.active > a,
			&.current_page_item > a,
			&.current_page_ancestor > a,
			&.current-page-ancestor > a, // WP doesn't use underscore for IDs
			&.current_page_parent > a
				box-shadow: inset 0 $navbar-button-line-width lighten($navbar-active-color, 20%)
				color: $navbar-active-color

			&.current_page_ancestor a
				box-shadow: none

	.navbar-toggler
		border: 2px solid $color-text
		box-shadow: none
		color: rgba($color-text, .5)
		font-size: 1.2em
		margin: 10px 0

		&:focus,
		&:active
			background-color: transparent
			border-color: $primary

			i
				color: $primary

		i
			margin: 5px 0 0 0


body
	&.is-scrolled
		.navbar-primary
			box-shadow: 0 0 25px rgba(black, .2)

.nav-link
	@extend .px-3


/* Big blue call-to-action. */
.nav-cta
	a
		color: white !important
		background-color: $primary
		border-radius: $border-radius-lg
		padding: 6px 20px !important
		margin-top: 9px
		transition: background-color ease-in-out 100ms

	&:hover a,
	&:focus a
		background-color: lighten($primary, 5%) !important
/* // Top Bar: Generics */


/* DROPDOWN MENUS */
.dropdown-menu
	box-shadow: none

.navbar-nav
	> li
		@extend .nav-item

	.dropdown-menu
		border: 0
		min-width: 130px
		background: $color-background-light
		font-size: 70%
		padding: 0
		border-radius: 0
		box-shadow: 2px 2px 0 rgba(black, .1)
		transition: opacity 0.1s ease

	.dropdown-menu > li > a
		padding: 6% 8% 6% 6%
		padding-right: 45px
		font-weight: normal
		line-height: 1.42857143
		color: $color-text
		transition: border-color 0.05s ease

		&:hover
			background: transparent
			color: lighten($primary, 10%)

	.dropdown-menu > .active > a
		background: transparent
		color: $color-secondary

	.dropdown-menu > .active > a:hover,
	.dropdown-menu > .active > a:focus, .dropdown-menu > li > a:active
		background: transparent
		color: darken($color-secondary, 10%)
		cursor: default

	.dropdown-menu > li > a:focus, .dropdown-menu > li > a:active,
	.dropdown-menu > .active > a:focus, .dropdown-menu > li > a:active
		background: transparent
		color: $primary

	.dropdown-menu
		i
			float: left
			width: 22px
			margin: 3px 0 0 2px

		.divider
			height: 1px
			margin: 0
			background: $color-background

	/* Special classes for mobile */
	li.dropdown.absolute.right
		+media-sm
			position: relative !important
			float: left !important
			width: 100%

.navbar-nav .open .dropdown-menu
	border-bottom-left-radius: 3px !important
	border-bottom-right-radius: 3px !important
	+media-sm
		float: left !important
		width: 100%
