@import "variables";

.section-header {
	background: $color_gray_90;
	position: relative; z-index: 777;
	height: 40px;
	font-size: 12px;
	color: $color_white;
	.fixed {
		background: $color_gray_90;
		position: fixed; top: 0px; left: 0px; right: 0px;
		min-width: 320px;
		height: 40px;
		color: $color_white;
	}
}

.header-item {
	float: left;
}

.header-logo {
	position: relative;
	overflow: hidden;
	float: left;
	height: 40px;
	svg { display: block; }
	.sm { display: none; }
	.lg { display: block; }
	@media(max-width: 1199px){
		.sm { display: block; }
		.lg { display: none; }
	}
}

.header-nav {
	.sidebar-nav {
		display: block;
		width: 35px; height: 40px;
		font-size: 18px;
		line-height: 40px;
		color: $color_white;
		text-align: center;
		@include transition();
		&:hover {
			//background: $color_white;
			//color: $color_danger;
			cursor: pointer;
			opacity: 0.65;
		}
	}
}

.header-search {
	position: relative;
	.header-item__toggle {
		border: none;
		position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
		z-index: 5;
		display: none;
	}
	.header-item__head {
		display: none;
		width: 32px;
		padding-top: 2px;
		line-height: 38px;
		text-align: center;
		.fa { font-size: 18px; }
	}
	.header-item__body {
		width: 180px;
		padding: 2px 4px 2px 0px;
	}

	.header-search__al-code {
		display: none;
		width: 176px;
		margin-bottom: 12px;
		@media ( min-width: 576px ){ margin-left: 77px; }
		@media ( min-width: 1200px ){ margin-left: 208px; }

	}
	.header-search__form {
		position: relative;
		.closer {
			top: 50%; right: 4px;
			margin-top: -8px;
			display: none;
		}
		.fa-search {
			position: absolute; top: 50%; right: 4px;
			display: block; width: 18px; height: 18px;
			font-size: 18px;
			line-height: 18px;
			margin-top: -9px;
			color: $color_gray_50;
		}
	}
	.header-search__input {
		background: $color_white;
		border: 1px solid $color_white;
		width: 100%; height: 34px;
		padding: 2px 24px 0px 8px;
	}
	.header-search__result {
		background: rgba(255,255,255,0.5);
		position: fixed; top: 40px; bottom: 0px; left: 0px; right: 0px; z-index: 5;
		overflow-y: auto;
		display: none;
		color: $color_black;
		.bg {
			background: $color_white;
			padding: 0px 12px 12px;
			@media (min-width: 576px){ padding-top: 12px; }
		}
		.header-search__tabs {
			position: relative;
			.header-search__close {
				border-bottom: 1px dashed $color_black;
				position: absolute; top: 10px; right: 0px;
				color: $color_black;
				&:hover {
					border-bottom-color: transparent;
				}
			}

			.nav-tabs {
				li {
					a {
						border-color: $color_gray_10;
						padding: 8px 12px !important;
					}
					&.active {
						a {
							background: $color_gray_10;
							font-weight: bold;
							color: $color_primary;
						}
					}
				}
			}
			.tab-content { position: relative; top: -1px; }
			.table {
				font-size: 12px;
				th, td {
					padding: 2px 4px;
				}
				thead {
					tr {
						background: $color_gray_10;
					}
				}
				tbody {}
				a {
					border-bottom-color: transparent;
					&:hover {
						border-bottom-color: $color_primary;
					}
				}
			}
		}
	}

	&.active {
		.header-search__result { display: block; }
		.header-search__form {
			.closer { display: block; }
			.fa-search { display: none; }
		}
	}

	@media (max-width: 575px) {
		.header-item__toggle { display: block; }
		.header-item__head { display: block; }
		.header-item__body {
			display: none;
			background: $color_white;
			position: fixed; top: 40px; left: 0px; right: 0px;
			width: auto;
			padding: 8px 12px;
		}
		.header-search__input {
			border-color: $color_gray_30;
		}
		.header-search__result { top: 90px; }
		&:hover {
			background: $color_white;
			color: $color_black;
		}
		&.open {
			.header-item__head { background: $color_white; color: $color_black; }
			.header-item__body { display: block; }
		}
	}
}

.header-page-title {
	position: relative;
	overflow: hidden;
	max-width: 240px;
	margin: 0px 8px;
	font-size: 16px;
	//font-weight: bold;
	color: $color_white;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 40px;
	a {
		border-bottom-color: transparent;
		color: inherit;
		&:hover { border-bottom-color: inherit; }
	}

	@media (max-width: 1599px){
		display: none;
	}
}
//fix
.content-page-title {
	margin-bottom: 16px;
	font-size: 24px;
	font-weight: bold;
	@media (min-width: 1600px){ display: none; }
}

.header-qminder {
	position: relative;
	height: 40px;
	padding: 0px 0px 0px 8px;
	&:before {
		content: '';
		background: #31d970;
		position: absolute; top: 0px; left: 8px; right: 0px;
		display: block; height: 2px;
	}

	.header-item__toggle {
		border: none;
		position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
		z-index: 5;
		display: none;
	}
	.header-item__head {
		position: relative;
		float: left;
		color: #31d970;
		line-height: 40px;
		svg {
			display: inline-block;
			vertical-align: middle;
		}
		span {
			display: inline-block;
			vertical-align: middle;
			font-size: 14px;
			font-style: italic;
		}
	}
	.header-item__body {
		float: left;
		padding-left: 8px;
		line-height: 40px;
		.contant-a { display: block; }
		.contant-b { display: none; }
		.btn { white-space: nowrap; }
	}

	&.danger {
		&:before { background: #fd8888; }
		.header-item__head { color: #fd8888; }
		.header-item__body {
			.contant-a { display: none; }
			.contant-b { display: block; }
		}
	}

	@media (max-width: 767px){
		.header-item__toggle { display: block; }
		.header-item__head { float: none !important; }
		.header-item__body {
			float: none !important;
			background: $color_black;
			position: absolute; top: 100%; left: 0px;
			display: none;
			padding: 8px;
			line-height: normal;
			white-space: nowrap;
		}
		&.open {
			.header-item__body {
				display: block;
			}
		}
	}
}

.header-icoset {
	position: relative;
	padding: 0px 4px;

	.header-icoset__count {
		background: $color_gray_10;
		display: inline-block;
		width: 32px; height: 32px;
		font-size: 16px;
		line-height: 32px;
		color: $color_gray_80;
		text-align: center;
		@include border-radius(50%);
		&.danger { background: $color_danger; color: $color_white; }
		&.warning { background: $color_warning; color: $color_black; }
	}
	.header-icoset__list {
		margin: 0px; padding: 0px; list-style: none;
		li {
			display: block; float: left;
			color: $color_white;
			text-align: center;
			a {
				border: none;
				display: block;
				min-width: 36px;
				height: 40px;
				padding: 0px 4px;
				color: inherit;
				&:hover { opacity: 0.5; }
			}
			.icon {
				display: block;
				padding-top: 4px;
				.fa, svg {
					display: block; width: 18px; height: 18px;
					margin: 0 auto;
					font-size: 18px;
					line-height: 18px;
				}
			}
			.count {
				display: block;
				line-height: 18px;
			}
			.decs {
				display: none;
			}
			&.danger { background: $color_danger; }
			&.warning { color: $color_warning !important; }
		}
	}

	.header-item__head {
		position: relative;
		display: none;
		padding: 0px 4px;
		line-height: 40px;
	}
	.header-item__toggle {
		border: none;
		position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
		z-index: 5;
		display: none;
	}
	.header-item__body {
		padding: 0px 4px;
	}

	&.rolled {
		.header-item__head { display: block; }
		.header-item__toggle { display: block; }
		.header-item__body {
			background: $color_white;
			position: absolute; top: 100%; left: 4px;
			@media (max-width: 575px){ left: auto; right: 0px; }
			display: none;
			width: 250px;
			padding: 0px;
			font-size: 14px;
			line-height: 1.5;
			color: $color_black;
			@include box-shadow(-3px 3px 10px $color_gray_30);
			.header-icoset__list {
				li {
					display: block;
					float: none;
					width: auto;
					text-align: left;
					a {
						position: relative;
						overflow: hidden;
						height: auto;
						padding: 8px;
						color: $color_black;
						.icon {
							display: block;
							float: left;
							width: 18px; height: 18px;
							padding: 0px;
						}
						.count {
							display: block;
							float: left;
							line-height: 18px;
							padding: 0px 8px;
						}
						.decs {
							position: relative;
							overflow: hidden;
							display: block;
							white-space: nowrap;
							line-height: 18px;
							text-overflow: ellipsis;
						}

						&:hover {
							background: $color_gray_10;
							opacity: 1;
						}
					}
					&.danger {
						a { color: $color_white; }
					}
					&.warning {
						background: $color_warning;
						//a { color: $color_warning; }
					}
				}
			}
		}
		@media (min-width: 1200px){
			&:hover {
				.header-item__body { display: block; }
			}
		}
	}
	@media (max-width: 1199px){
		.header-item__head { display: block; }
		&.open {
			.header-item__head { background: $color_black; }
		}
		.header-item__toggle { display: block; }
		.header-item__body {
			background: $color_black;
			position: absolute; top: 100%; left: 4px;
			@media (max-width: 575px){ left: auto; right: 4px; }
			display: none;
			width: 250px;
			padding: 0px;
			font-size: 14px;
			line-height: 1.5;
			color: $color_white;
			@include box-shadow(-3px 3px 10px $color_gray_30);
			.header-icoset__list {
				li {
					display: block;
					float: none;
					width: auto;
					text-align: left;
					a {
						position: relative;
						overflow: hidden;
						height: auto;
						padding: 8px;
						color: $color_white;
						.icon {
							display: block;
							float: left;
							width: 18px; height: 18px;
							padding: 0px;
						}
						.count {
							display: block;
							float: left;
							line-height: 18px;
							padding: 0px 8px;
						}
						.decs {
							position: relative;
							overflow: hidden;
							display: block;
							white-space: nowrap;
							line-height: 18px;
							text-overflow: ellipsis;
						}

						&:hover {
							background: $color_gray_90;
							color: $color_gray_30;
							opacity: 1;
						}
					}
					&.danger {
						a {
							color: $color_white;
							&:hover {
								background: darken($color_danger, 10%);
							}
						}
					}
					&.warning {
						background: $color_warning;
						a {
							color: $color_black;
							&:hover {
								background: darken($color_warning, 10%);
							}
						}
					}
				}
			}
		}
	}

	&.open {
		.header-item__body { display: block; }
	}

	.pull-left & {
		@media (max-width: 767px){
			.header-item__body { right: -35px; }
		}
	}

	.pull-right & {
		&.rolled {
			.header-item__body { left: auto; right: 4px; }
		}
		@media (max-width: 1199px){
			.header-item__body { left: auto; right: 4px; }
		}
	}
}

.header-fastlinks {
	margin: 0px; padding: 0px 8px; list-style: none;
	padding-top: 1px;
	li {
		line-height: 18px;
		a {
			border-bottom-color: transparent;
			color: $color_white;
			&:hover { border-bottom-color: $color_white; }
		}
	}
}

.header-user {
	padding: 0px 8px;
	.header-item__toggle {
		border: none;
		position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
		z-index: 5;
		display: none;
	}
	.header-item__head {
		position: relative; overflow: hidden;
		.header-user__img {
			float: left;
			padding: 4px 8px 4px 0px;
			img {
				display: block;
				width: 32px;
			}
		}
		.header-user__cart {
			position: relative;
			overflow: hidden;
			padding-top: 3px;
			line-height: 1.4;
			.header-user__name {
				position: relative;
				overflow: hidden;
				max-width: 60px;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			a.logout {
				color: $color_white;
				.fa { font-size: 11px; }
				&:hover { text-decoration: underline; }
			}
		}
	}
	.header-item__body {
		background: $color_white;
		position: absolute; top: 100%; right: 0px;
		display: none;
		font-size: 14px;
		line-height: 1.5;
		color: $color_black;
		@include box-shadow(-3px 3px 10px $color_gray_30);
		.header-user__padd {
			padding: 12px 24px;
			& + .header-user__padd { padding-top: 0px; }
		}
		.header-user__name { font-size: 18px; }
		.header-user__lang {
			margin-top: 12px;
			select { margin-left: 10px; }
		}
		.header-user__menu {
			margin: 0px;
			padding: 0px;
			list-style: none;
			&.header-user__padd { padding-left: 0px; padding-right: 0px; }
			li {
				a {
					border: none;
					display: block;
					padding: 8px 24px 9px;
					color: $color_black;
					&:hover {
						background: $color_gray_30;
					}
				}
			}
		}
	}

	&.open {
		.header-item__body { display: block; }
	}

	@media (min-width: 768px){
		&:hover {
			.header-item__body { display: block; }
		}
	}
	@media (max-width: 767px){
		padding-right: 0px;
		.header-item__toggle { display: block; }
		.header-item__head {
			.header-user__img {
				padding: 0px;
				img { width: 40px; }
			}
			.header-user__cart { display: none; }
		}
	}
}