// HEADER

.site-header{
	// height: 48px;
	background-color: #fff;
	box-shadow: 0 1px 3px 0 rgba(#000,.12);
	position: relative;
	z-index: 1000;
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
		li{
			position: relative;
			a{
				display: block;
			}
		}
	}
	a{
		position: relative;
		&:hover, &:focus, &:active, &:visited{
			text-decoration: none;
		}
	}
	.container-fluid{
		padding: 0 12px;
	}

	// Top bar
	.site-header__topbar{
		background-color: $grey200;
		.sh__topbar__container{
			height: 26px;
		}
	}
	.sh__topbar-list{
		.sh__topbar-list__item{
			display: inline-block;
			vertical-align: top;
			margin: 0 8px 0 0;
			&:last-child{
				margin: 0;
			}
			.single-item{
				display: block;
				padding: 3px 8px;
				line-height: 20px;
				font-size: 13px;
				white-space: nowrap;
				color: $grey700;
				span,i{
					display: inline-block;
					vertical-align: top;
				}
				.single-item__image-icon{
					img{
						display: inline-block;
						vertical-align: top;
						margin-top: 4px;
						height: 12px;
						width: auto;
					}
				}
				&.active{
					color: $grey900;
				}
			}
			a.single-item{
				&:hover{
					color: $color-primary_text;
					background-color: $grey300;
				}
			}
		}
	}


	// Main bar

	.sh__mainbar__container{
		display: flex;
		align-items: center;
		height: 48px;
		@media (min-width: $screen-md-min){
			height: 60px;
		}
	}

	.sh__site-logo{
		flex: 0 0 auto;
		min-width: 0;
		padding: 0;
		margin: 0;
		@media (min-width: $screen-md-min){
			margin-left: 12px;
		}
		a{
			display: block;
			width: 45px;
			height: 32px;
			// background-color: $grey200;
			text-indent: -9999px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: 0 50%;
			@media (min-width: $screen-md-min){
				width: 56px;
				height: 40px;
			}
		}
	}
	.sh__desktop-screen-navbar{
		flex: 1 1 auto;
		min-width: 0;
	}

	.sh__nav-list{
		.sh__nav-list__item{
			display: inline-block;
			vertical-align: top;
			.single-item{
				display: block;
			}
		}
	}

	// desktop nav
	.sh__desktop-screen-navbar{
		margin: 0 0 0 36px;
		.sh__nav-list{
			font-size: 0;
			white-space: nowrap;
			.sh__nav-list__item{
				font-size: 15px;
				margin: 0 12px 0 0;
				&:last-child{
					margin: 0 12px 0 0;
				}
				&.sh__nav-list__item--has-btn{
					margin: 13px 12px;
				}
				&.sh__nav-list__item--has-btn-sm{
					margin: 15px 12px;
				}
				.single-item{
					padding: 20px 0 18px;
					line-height: 20px;
					font-size: 15px;
					font-weight: 500;
					color: $grey900;
					border-bottom: 2px solid transparent;
					&:hover{
						color: $grey700;
					}
					&.single-item--notify{
						padding: 16px 4px 14px;
						span{
							display: block;
						}
						.notify-icon{
							margin: 0 4px 0 0;
							width: 28px;
							height: 28px;
							line-height: 28px;
							font-size: 18px;
							text-align: center;
							color: #fff;
							background-color: $color-primary;
							border-radius: 50%;
						}
						.notify-label{
							//
						}
						.notifi-count{
							position: absolute;
							bottom: 50%; left: 50%;
							margin-bottom: 3px; margin-left: 3px;
							padding: 1px 4px;
							line-height: 14px;
							font-size: 10px;
							font-weight: 500;
							color: #fff;
							background-color: $grey800;
							border-radius: 2px;

						}
					}
					&.single-item--user{
						padding: 16px 0 14px;
						span{
							display: inline-block;
							vertical-align: top;
						}
						.user-avatar{
							border: 2px solid #eee;
							border-radius: 50%;
							img{
								display: block;
								width: 24px;
								height: 24px;
								border-radius: 50%;
								object-fit: cover;
							}
						}
						.user-title{
							margin: 4px 0 0 4px;
							line-height: 20px;
							font-size: 15px;
							font-weight: 500;
						}
						.user-dropdown-icon{
							line-height: 20px;
							font-size: 13px;
							margin: 4px 0 0 8px;
						}
					}
				}
				&.active{
					a{
						color: $color-primary-text;
						border-bottom-color: $color-primary;
					}
				}
			}
			.divider{
				display: inline-block;
				vertical-align: top;
				height: 34px;
				width: 1px;
				margin: 13px 12px 0 0;
				background-color: #eaeaea;
			}
		}
	}
	.sh__dropdown-menu{
		margin: 0;
		padding: 0;
		border: 0;
		width: auto;
		border-top: $border;
		border-radius: 0;
		.sh__menu-list{
			margin: 0;
			padding: 0;
			border: 0;
			list-style: none;
			.sh__list__item{
				border-bottom: 1px solid #f5f5f5;
				a{
					display: block;
					padding: 8px 12px;
					line-height: 18px;
					font-size: 13px;
					font-weight: 500;
					color: $grey800;
					white-space: nowrap;
					&:hover{
						background-color: $grey200;
					}
				}
			}
		}
	}
	.sh__notify-dropdown-menu{
		margin: 0;
		padding: 0;
		border: 0;
		width: 360px;
		&:after{
			display: block;
			content: "";
			position: absolute;
			top: -10px; left: 14px;
			z-index: 1000;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 8px 10px 8px;
			border-color: transparent transparent $grey900 transparent;
		}
		&.pull-right{
			&:after{
				left: auto; right: 14px;
			}
		}
		.sh__notify-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: $grey900;
			border-bottom: 1px solid #e0e0e0;
			padding: 5px 12px;
			.sh_notify-header__title{
				margin: 0;
				font-size: 12px;
				font-weight: 500;
				line-height: 18px;
				color: #fff;
			}
			.sh_notify-header__view-more{
				display: block;
				font-size: 11px;
				line-height: 16px;
				color: $grey200;
			}
		}
		.sh__notify-list{
			position: relative;
			margin: 0;
			padding: 0;
			list-style: none;
			max-height: 420px;
			overflow-y: auto;
			@include scrollbar(4px, $grey400, $grey100, 2px);
			.sh__notify-list__item{
				.single-notify{
					display: block;
					display: flex;
					padding: 8px 12px;
					border-bottom: 1px solid #eee;
					.single-notify__image{
						flex: 0 0 auto;
						min-width: 0;
						margin: 0 8px 0 0;
						img{
							display: block;
							width: 56px;
							height: 56px;
						}
						&.circle-image{
							img{
								border-radius: 50%;
							}
						}
					}
					.single-notify__content{
						flex: 1 1 auto;
						min-width: 0;
						.single-notify__content__main{
							line-height: 17px;
							font-size: 13px;
							font-weight: 500;
							color: $grey900;
						}
						.single-notify__content__meta{
							margin: 5px 0 0;
							line-height: 16px;
							font-size: 0;
							color: $grey600;
							span{
								display: inline-block;
								vertical-align: top;
								line-height: 16px;
								font-size: 11px;
								&:after{
									content: "\2022";
									display: inline-block;
									vertical-align: top;
									padding: 0 4px;
									line-height: 16px;
									font-size: 8px;
									color: $grey400;
								}
								&:last-child{
									&:after{
										display: none;
									}
								}
							}
						}
						.single-notify__content__user{
							line-height: 17px;
							font-size: 13px;
							font-weight: 500;
							color: $grey900;
						}
						.single-notify__content__message{
							margin: 2px 0 0;
							line-height: 17px;
							font-size: 13px;
							color: $grey700;
						}
					}
					.single-notify__time{
						margin: 0 0 0 12px;
						flex: 0 0 auto;
						line-height: 16px;
						font-size: 11px;
						text-align: right;
						color: $grey600;
						span{
							display: block;
						}
					}	
					&:hover{
						background-color: $grey200;
					}
				}
				&:last-child{
					.single-notify{
						border-bottom: 0;
					}
				}
			}
		}
	}


	// mobile nav
	.sh__mobile-screen-navbar{
		flex: 1 1 auto;
		min-width: 0;
		margin-right: -6px;
		text-align: right;
		.sh__nav-list__item{
			.collapse-icon-item{
				width: 48px;
				height: 48px;
				text-align: center;
				font-size: 28px;
				line-height: 48px;
				color: $grey800;
				i{
					&:before{
	    			content: "\f2d7";
					}
					
				}
				&.collapsed{
					i{
						&:before{
							content: "\f20e";
						}
					}
				}
				&:active{
					background-color: $grey100;
				}
			}
		}
	}
	.sh__mobile-screen-navmenu{
		position: absolute;
		top: 100%; left: 0; right: 0;
		z-index: 1000;
		background-color: #fff;
		box-shadow: 0 2px 5px 0 rgba(#000,.12);
		max-height: calc(100vh - 48px);
		// overflow: auto;
	}
	.sh__nav-list-mobile{
		display: block;
		padding: 12px 12px;
		text-align: center;
		border-top: $border;
		.sh__nav-list__item{
			display: block;
			border-bottom: 1px dotted $border-color;
			&:last-child{
				border-bottom: 0;
			}
			.single-item{
				padding: 12px 0;
				line-height: 20px;
				font-size: 15px;
				color: $grey900;
				&.single-item--text{
					padding: 16px 0;
					line-height: 22px;
					font-size: 17px;
					font-weight: 500;
				}
				&.single-item--notify{
					span{
						display: inline-block;
						vertical-align: top;
					}
					.notify-icon{
						margin: 0 4px 0 0;
						width: 20px;
						height: 20px;
						line-height: 20px;
						font-size: 12px;
						text-align: center;
						color: #fff;
						background-color: $color-primary;
						border-radius: 50%;
					}
					.notify-label{
						margin: 0 0 0;
						line-height: 20px;
						font-size: 14px;
						font-weight: 500;
					}
					.notifi-count{
						margin: 2px 0 0 12px;
						padding: 1px 4px;
						line-height: 14px;
						font-size: 10px;
						font-weight: 500;
						color: #fff;
						background-color: $grey800;
						border-radius: 2px;

					}
				}
				&.single-item--user{
					span{
						display: inline-block;
						vertical-align: top;
					}
					.user-avatar{
						border: 2px solid #eee;
						border-radius: 50%;
						img{
							display: block;
							width: 28px;
							height: 28px;
							border-radius: 50%;
							object-fit: cover;
						}
					}
					.user-title{
						margin: 6px 0 0 4px;
						line-height: 20px;
						font-size: 15px;
						font-weight: 500;
					}
					.user-dropdown-icon{
						line-height: 20px;
						margin: 6px 0 0 12px;
					}
				}
			}
		}
		.sh__inner-list{
			padding: 0 0 12px;
			.sh__inner-list__item{
				.single-inner-item{
					padding: 4px 0;
					line-height: 18px;
					font-size: 14px;
					color: $grey700;
				}
				.single-item__image-icon{
					img{
						display: inline-block;
						vertical-align: top;
						margin-top: 4px;
						height: 12px;
						width: auto;
					}
				}
			}
		}
	}

}