$header-text-color: #4e6167
$search-border-color: #bbcdd2

#header
	z-index: 20
#header_infos
	position: fixed
	z-index: 503
	background: #fff
	height: $size-header-height
	width: 100%
	display: flex
	align-items: stretch
	color: $header-text-color
	font-size: 13px
	box-sizing: content-box

	.mobile &
		padding: $header-mobile-padding-y 0

	.material-icons
		vertical-align: middle
		position: relative

	#header_logo
		height: 100%
		background: url('#{$img-path}/prestashop-avatar-header_shopname.png') no-repeat center left
		width: 13.13rem
		.mobile &
			margin-left: -15px
			min-width: 172px
			width: 0
			flex-grow: 1

	#shop_version
		font-size: 10px
		position: absolute
		left: 11.25rem
		top: .9375rem
		color: #4a4a4a
        // hide if viewport <= tablet portrait size
		@media (max-width: breakpoint-max('md'))
			display: none

	> .component
		margin:
			left: 0.5rem
			right: 0.5rem

		// hide on very small screens
		&.hide-mobile-sm
			@media (max-width: breakpoint-max('sm'))
				display: none

	// disable bootstrap styling
	.btn-link
		color: initial
		&:hover
			color: initial
			text-decoration: none
		&:active,
		&:focus
			text-decoration: none
			box-shadow: none
			outline: none

	#quick_select
		height: $size-header-height
		font-size: 13px
		color: $header-text-color
		line-height: 1.5
		padding: 7px 10px 5px
		> .material-icons
			font-size: 20px
			margin-left: -5px

	// Shop state / Maintenance / Debug / View my shop
	.shop-state,
	#header_shopname
		display: inline-block
		padding: $navbar-padding-vertical 5px
		line-height: $line-height-computed
		height: $navbar-height

		> .material-icons
			margin-right: $navbar-padding-horizontal

	.shop-state
		padding-top: 11px
		color: $header-text-color
		text-decoration: none
		white-space: nowrap

		&:hover,
		&:focus
			color: $brand-info !important
			text-decoration: none !important

		.material-icons
			color: #6c868e
			font-size: 20px
			margin-top: -4px

		// hide label if width <= tablet landscape size
		@media (max-width: breakpoint-max('lg'))
			span
				display: none

		@media (max-width: $screen-sm-max)
			padding:
				left: 10px !important
				right: 10px !important
			margin-right: 0
			.material-icons
				margin-right: 0

	ul.header-list
		color: $header-text-color
		margin-bottom: 0
		padding: 0
		display: flex
		align-items: stretch

		#header_shopname
			padding-top: 11px
			color: $header-text-color !important
			&:hover, &:focus
				color: $brand-info !important

		li
			list-style: none
			display: block

			> a
				&.notifs
					display:        flex
					height:         $size-header-height
					min-width:      $size-header-height
					line-height:    $size-header-height
					box-sizing:     border-box
					padding:        0 5px !important
					vertical-align: middle
					align-items: 	center
					&:hover, &:focus
						color: $brand-info
						text-decoration: none

	#maintenance-mode
		a
			color: #6c868e
			&:hover, &:focus
				color: $brand-info
				text-decoration: none

	// view my shop
	#header_shopname
		font-size: 13px !important
		height: inherit !important
		text-decoration: none
		padding-top: 11px
		text-overflow: ellipsis
		white-space: nowrap
		overflow-x: hidden
		i
			color: $brand-info
		@media (max-width: 320px)
			max-width: 140px

	// multishop menu
	#header_shop
		.dropdown
			&.open
				.dropdown-toggle
					background: none !important
					color: $brand-info !important
			.material-icons
				color: $brand-info
				top: -1px
			.dropdown-toggle
				display: inline-block !important
				color: $header-text-color !important
				text-decoration: none !important
				&:hover
					color: $brand-info !important
				i
					padding-left: 5px
			.dropdown-menu
				.list-dropdown-menu
					overflow-y: auto
					max-height: 500px
					margin: 20px
					padding: 0

	// employee button
	#header_employee_box
		padding: 0
		margin-right: 0
		margin-bottom: 0
		display: flex
		align-items: center

		.mobile &
			display: none

		#employee_infos
			list-style-type: none
			width: 24px
			margin-right: 10px
			box-sizing: border-box
			display: block

			#employee_links
				.employee_avatar
					display: none !important
					img
						border: none
						padding: 0

				@media (max-width: $screen-sm)
					li
						color: white
						font-size: 1.2em
						text-transform: uppercase
						i
							font-size: 1.3em
							color: $brand-primary

			.employee_name
				text-align: center

			.dropdown-menu
				min-width: inherit
				width: 10.625rem
				li
					font-size: 14px
					&:hover
						.material-icons
							color: white
					&.username
						font-weight: 600
						padding: 16px 0 9px
					&.divider
						border: 1px solid $gray-lighter
					a
						.material-icons
							padding: 0
							margin-right: 5px

.bo_search_form
	@extend .hidden-xs
	flex-grow: 1
	margin: 4px 0 0 0
	.form-group
		width: 250px
	#bo_query
		@include border-radius(0, 55px, 55px, 0)
		color:       $main-color
		background:  white
		border:      1px solid $search-border-color
		border-left: none
		font-style:  italic
		&::placeholder
			color: $gray-medium
		@include box-shadow(none)
		@include transition(none)
	.input-group
		margin: 0 !important
	.input-group-btn
		@include border-radius(55px, 0, 0, 55px)
		border:       1px solid $search-border-color
		border-right: none
		.btn
			@include border-radius(55px, 0, 0, 55px)
			@include box-shadow(none)
			height: 29px
			outline: none
		.btn-default
			@include box-shadow(none)
			border: 1px solid transparent !important
	.clear_search
		position: absolute
		top: 6px
		z-index: 10
		@include right(8px)
	#search_type_icon
		line-height: 1
		top: -2px
		padding-right: 0
		font-size: 20px
	.icon-remove
		vertical-align: middle

#header_quick
	@extend .hidden-xs
	@extend .hidden-sm

	font-size: 13px
	a
		//color: #6c868e

	.dropdown
		> a,
		> a:focus
			color: $header-text-color !important
			background-color: transparent !important

		> a
			.material-icons
				font-size: 20px
				margin-left: -5px

		> a:hover
			color: $toolbar-buttons-hover-color !important

	.dropdown-menu
		> li
			a
				padding: 7px 15px
				&:hover
					color: #fff

				.material-icons
					margin-right: $navbar-padding-horizontal

				&:not(:hover)
					.material-icons
						color: #6c868e

		.material-icons
			font-size: 1.125rem

#ajax_running
	position: absolute
	height: 35px
	width: 35px
	top: 0
	background-color: rgba(black,.4)
	text-align: center
	@include left(0)
	i
		font-size: 20px
		color: rgba(white,.6)
		line-height: 35px

#notification,
#employee_infos
	&.open
		background: none
		a
			&.dropdown-toggle
				background: none !important
	.material-icons
		color: #6c868e
		font-size: 22px
		vertical-align: middle
	#total_notif_number_wrapper
		display: inline-block
		line-height: .75rem
		height: 1rem
		vertical-align: middle
		position: absolute
		top: .3rem
		right: .6rem
		color: #fff
		background: #f1b746
		font:
			size: .625rem
		padding: 0 .18rem
		border-radius: .625rem
		border: 2px solid #fff
		> span
			font-size: inherit
			color: inherit
	.dropdown-menu
		margin: 0
		padding: 0
		border-radius: 0
		min-width: 25rem
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1)
		border: 1px solid #bbcdd2
		top: 42px
		right: 5px !important
		&:before, &:after
			bottom: 100%
			right: 8px
			border: solid transparent
			content: " "
			height: 0
			width: 0
			position: absolute
			pointer-events: none
		&:after
			border-color: transparent
			border-bottom-color: white
			border-width: 7px
			margin-right: 1px
		&:before
			border-color: transparent
			border-bottom-color: #bbcdd2
			border-width: 8px
		.notifications
			.nav-tabs
				border-bottom: 1px solid #fff
				.nav-item
					margin-left: 0
					width: 33%
					text-align: center
					margin-bottom: -1px
					&.active
						a
							border-top: 0
							border-bottom: 3px solid $brand-info
							color: $brand-info
					&:hover
						a
							color: $brand-info
					.nav-link
						color: #6c868e
						font-weight: 400
						padding: .9375rem .9375rem .625rem
						font-family: Open Sans,sans-serif
						font-size: 0.9rem
						text-transform: none
						border: 0
			.tab-content
				border-top: .125rem solid $gray-lighter
				padding: 0
				margin-top: -.0625rem
				background: #f2f4f5
				.tab-pane
					height: 11.875rem
					overflow-y: auto
					.no-notification
						display: none
					&.empty
						color: #6c868e
						text-align: center
						&::after
							content: "\E7F5"
							font-family: "Material Icons"
							opacity: 0.7
							font-size: 5.625rem
							color: #bbcdd2
						> .no-notification
							position: absolute
							bottom: 0
							width: 100%
							display: block
				.notif
					display: block
					padding: .625rem .9375rem
					color: #6c868e
					.material-icons
						vertical-align: top
						font-size: 16px
						line-height: 16px
					.message-notification-status
						&.open
							color: #5cb85c
						&.closed
							color: #d9534f
						&.pending1, &.pending2
							color: #FFBB00
					strong
						color: #363a41
					&:hover
						background-color: #3ed2f0
						color: #fff
						text-decoration: none
						strong
							color: #fff

#employee_infos
	> a > .material-icons
		font-size: 24px