/* Navigation */
.navbar-overlay
	bottom: 0
	display: none
	left: 0
	height: 100%
	position: absolute
	right: 0
	top: 0
	transition: background-color 350ms ease-in-out
	width: 100%
	z-index: 0

	&+.navbar-container
		.search-input
			+media-lg
				border: thin solid rgba(white, .2)

				#cloud-search, .tt-hint
					&::placeholder
						color: rgba(white, .8)

			border: thin solid transparent
			border-radius: 3px
			margin: 8px 0

	&.is-active
		background-color: $color-background-nav
		text-shadow: none

		&+.navbar-container
			.search-input
				+media-sm
					background-color: darken($color-background-nav, 6%)
				+media-md
					background-color: darken($color-background-nav, 6%)
				+media-lg
					border: thin solid transparent
					background-color: darken($color-background-nav, 6%)

				#cloud-search, .tt-hint
					&::placeholder
						color: rgba(white, .5)

	+media-lg
		display: block


.navbar-container
	align-items: center
	display: flex
	width: 100%

	.navbar-collapse
		+media-xs
			padding: 0
			width: 100%
			max-height: initial // overrides bs, we don't have many items

		&.show-notifications
			display: block

			li
				display: none
				&.nav-notifications
					display: block
					position: absolute
					top: 7px
					left: 0
					width: 100%
					z-index: $z-index-base

					#notifications
						padding: 0 10px


nav
	&.navbar
		border-radius: 0
		left: 0
		position: fixed
		right: 0
		top: 0

.navbar-brand
	padding-left: 10px
	color: $color-text

	width: 120px // Blender Cloud logo width

	&:hover
		color: $color-text-dark-primary

nav.navbar,
nav.sidebar
	align-items: center
	background-color: $color-background-nav
	border: none
	display: flex
	padding: 0
	z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */

	nav
		margin-left: auto
		margin-right: 0

		.navbar-nav
			margin-right: 0
			+media-xs
				margin: 0
				width: 100%

	li
		user-select: none
		position: relative

		a.navbar-item
			align-items: center
			color: $color-text
			display: flex
			user-select: none
			padding: $navbar-brand-padding-y
			height: 100%
			transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out

			+media-sm
				padding-left: 10px
				padding-right: 10px

			&:hover, &:focus
				color: $color-primary
				background-color: transparent
				box-shadow: inset 0 -3px 0 $color-primary
				text-decoration: none

			&:focus
				box-shadow: inset 0 -3px 0 $color-primary

			&.active
				color: $color-primary
				box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%)

				&:hover
					box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%)

			.pi-angle-down
				position: relative
				left: 5px

		&.nav-item-sign-in
			i
				padding-right: 6px
				font-size: 1.1em

		img.gravatar
			border-radius: 999em
			height: 32px
			width: 32px
			box-shadow: 1px 1px 0 rgba(black, .2)
			position: relative


		.special
			width: 18px
			height: 18px
			border-radius: 999em
			position: absolute
			background-color: white
			z-index: 2
			display: inline-block
			top: 10px
			left: 38px
			font-size: 1.2em
			box-shadow: 1px 1px 1px rgba(black, .2)

			&.subscriber
				background-color: $color-success
				color: white
				font-size: .6em

			&.demo
				background-color: $color-info
				color: white
				font-size: .6em

			&.none
				color: $color-danger

			i
				+position-center-translate

	.dropdown
		position: relative
		min-width: 60px

		// Removes angle-down icon from bootstrap,
		// since we use a nicer chevron.
		a:after
			display: none

		span.fa-stack
			position: absolute
			top: 50%
			left: 50%
			transform: translate(-50%, -50%)

		ul.dropdown-menu
			padding: 0

			li
				a
					padding: 5px 15px 5px 5px

					&:hover
						color: $color-primary
						box-shadow: none

					&.subitem
						font-size: .8em
						padding-top: 0
						text-transform: initial

				i
					width: 35px
					text-align: center

				&.subscription-status
					padding:
						top: 10px
						bottom: 10px

					transition: opacity 150ms ease-in-out
					opacity: 1

					&:hover
						opacity: .8

					a
						text-transform: initial

					&.none a
						color: $color-danger
					&.subscriber a
						color: $color-success

					&.demo a
						color: $color-info

					span.info
						display: block

						span.renew
							display: block
							color: $color-text-dark-primary
							font-size: .9em


nav.sidebar
	ul li.nav-item-sign-in a.navbar-item
		font-size: .8em


.navbar-backdrop-container
	width: 100%
	height: 100%
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0

	img
		display: none
		position: fixed
		width: 100%
		align-self: flex-start
		+media-md
			display: block
		+media-lg
			display: block


.navbar-backdrop
	z-index: 0
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0

	width: 100%
	height: 100%
	background:
		size: 100%
		position: 0 0
		repeat: no-repeat
		color: transparent
		image: url(https://cloud.blender.org/static/assets/img/backgrounds/pattern_02_blur.jpg)

	filter: none

	&.project
		display: none
		+media-lg
			display: block
			left: -10px
			width: 105%
	&.blog
		display: none
		+media-lg
			display: block
			left: -10px
			width: 105%
		+media-md
			display: block
			left: -10px
			width: 105%


.navbar-backdrop-overlay
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: $navbar-backdrop-height
	background: linear-gradient(to bottom, rgba($color-background, 0) 25%, rgba($color-background,0.5) 50%, rgba($color-background,1) 100%)


/* Global, we want all menus to look like this */
ul.dropdown-menu
	background-color: $color-background-light
	border: none
	box-shadow: 0 10px 25px rgba(black, .1)
	user-select: none

	.divider
		background-color: rgba(black, .1)

nav .dropdown:hover ul.dropdown-menu
	display: block

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu
	margin-top: 0

.navbar+.page-content
	padding-top: $navbar-height


// Secondary navigation for
.nav-secondary
	align-items: center
	box-shadow: 0 2px 0 0 $color-background

	.nav-link
		color: $color-text
		transition: box-shadow 150ms ease-in-out

		&:hover,
		&.active
			box-shadow: 0 2px 0 0 $color-primary

	.nav-title
		font-weight: bold
		padding-right: 20px