$navbar-height = $shell-top-nav-height is defined ? $shell-top-nav-height : 56px
$-navbar-item-padding = 15px

.navbar
	@extend .clearfix
	change-bg('darkest')
	theme-dark()
	height: $navbar-height
	display: flex

	a
		theme-prop('color', 'lighter')

.navbar-left
	flex: none

.navbar-center
	flex: auto

.navbar-right
	flex: none

.navbar-items
	@extend .list-unstyled

.navbar-items
.navbar-items > li
	display: inline-block
	vertical-align: top
	margin-bottom: 0

.navbar-items > li > a
.navbar-item
.navbar-avatar
	display: inline-block
	vertical-align: top
	overflow: hidden
	height: $navbar-height
	line-height: 26px
	user-select: none

.navbar-items > li > a
.navbar-item
	padding: $-navbar-item-padding

	> .notification-tag
		position: absolute
		top: 0
		right: 0
		line-height: 15px
		text-align: center

.navbar-separator
	change-bg('dark')
	position: relative
	display: inline-block
	height: 24px
	width: $border-width-base
	margin: 0 10px
	vertical-align: top
	top: ($navbar-height - @height) * 0.5

.navbar-avatar
	padding: 13px $-navbar-item-padding

	img
		width: 30px
		height: @width
		display: inline-block
		vertical-align: bottom

.navbar-form
	display: flex
	align-items: center
	justify-content: center
	padding: 0
	width: 100%
	height: $navbar-height
	overflow: hidden

	.form-control
		border-width: 0
		width: 100%

.navbar-controls
	margin-top: ($navbar-height - $button-md-line-height) * 0.5
	padding-right: @margin-top

/**
 * Hover/active state underline.
 */
.navbar-items > li > a
.navbar-item
.navbar-avatar
	position: relative

	&::before
		change-bg('gray')
		position: absolute
		content: ''
		right: 0
		left: 0
		bottom: 0
		height: 3px
		transform: translate(0, 4px)
		transition: transform 300ms $strong-ease-out, background-color 200ms linear

	&:hover
		&::before
			transform: translate(0, 0)

	&.active
		&
		&:hover
			&::before
				change-bg('highlight')
				transform: translate(0, 0)
