//
// Site Navbar (Header) - Hypermarket Theme
// --------------------------------------------------

// Navbar Base Class
.navbar {
	z-index: $navbar-zindex;
	width: 100%;
	min-height: $navbar-min-height;
	background-color: $navbar-bg;
	display: flex;
	align-items: center;
	@include padding(null null null 30px);
	@include position(relative, 0 null null 0);
	&.navbar-sticky {
		position: sticky;
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -o-sticky;
	}
}


// Site logo
.site-logo {
	z-index: 10;
	display: inline-block;
	vertical-align: middle;
	color: $text-color;
	font-size: floor($font-size-base * 1.25); // 20px
	font-weight: 500;
	text-decoration: none;
	@include position(relative);
	@include margin(null 20px null null);
	@include padding(0);
	span { font-weight: normal; }
	&:hover,
	&:focus, &:active {
		color: $text-color;
		text-decoration: none;
	}
	img {
		width: 100%;
		max-width: ($image-logo-width + 58);
		@include margin(6px null null 0.7px);
	}
	&.visible-desktop { width: 260px; }
	&.visible-mobile { display: none; }
	& >.site-logo { @include padding(0); @include margin(0); }
	@media #{$tablet-port} {
		z-index: 20;
		margin-right: 15px;
		&.visible-desktop { display: none; }
		&.visible-mobile { display: inline-block; }
	}
	@media #{$mobile-port} { @include margin(null 8px null null); }
}

// Site tagline
.site-tagline {
	color: $gray;
	display: block;
	max-width: 310px;
	font-style: italic;
	font-size: floor(($font-size-base * 0.7));
	@include padding(9px 0 0 0);
	@media #{$tablet-port} { 
		&.visible-desktop { display: none; }
	}
}

// Toolbar
.toolbar {
	z-index: 10;
	@include size($toolbar-width-desktop, 100%);
	@include position(absolute, -2px 30px null null);
	.inner {
		display: table;
		table-layout: fixed;
		@include square(100%);
		> a,
		.cart-btn > a {
			font-size: $toolbar-toggle-icon-size;
			color: $text-color;
			text-decoration: none;
			line-height: 1;
			@include transition(all .3s);
			> i {
				position: relative;
				display: inline-block;
				font-style: normal;
				@include opacity(1);
				@include transform(translateY(0) scale(1));
				@include transition(transform .3s, opacity .15s);
			}
			&:hover { color: $gray; }
		}
		.cart-btn {
			cursor: pointer;
			> a {
				display: block;
				padding: 20px;
			}
			&:hover > a { color: $gray; }
		}
		> a,
		> .cart-btn {
			position: relative;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			.count {
				display: block;
				line-height: 16px;
				font-size: $font-size-xs;
				color: #fff;
				text-align: center;
				border-radius: 50%;
				background-color: $brand-primary;
				@include square(16px);
				@include position(absolute, -2px -17px null null);
			}
			&.mobile-menu-toggle {
				display: none;
				&.menu-text-right {text-align: right !important;}
				&:after {
					display: block;
					font-family:'Material Icons';
					content:"\e5cd";
					margin-top: -$toolbar-toggle-icon-size;
					@include opacity(0);
					@include transform(translateY(20px) scale(0.7));
					@include transition(transform .3s, opacity .15s);
				}
				&.active {
					> i {
						@include opacity(0);
						@include transform(translateY(-20px) scale(0.7));
					}
					&:after {
						@include opacity(1);
						@include transform(translateY(0) scale(1));
					}
				}
			}
		}
	}
}

// Cart Dropdown
.cart-dropdown {
	display: none;
	width: $cart-dropdown-width;
	list-style: none;
	text-align: left;
	background-color: $cart-dropdown-bg-color;
	border: $cart-dropdown-border;
	cursor: default;
	@include margin(-14px 0 0 0);
	@include padding(25px 20px);
	@include position(absolute, 100% 0 null null);
	& .widget {
		padding: 0 !important;
		a.checkout { @include margin(null 0 null null); }
	}
	.cart-item {
		position: relative;
		display: table;
		width: 100%;
		border-bottom: $cart-dropdown-border;
		@include margin(null null 15px null);
		@include padding(0 0 15px 0);
		dl.variation {
			display: none;
		}
		.item-thumb,
		.item-details {
			display: table-cell;
			vertical-align: top;
		}
		.item-thumb {
			width: $cart-dropdown-thumb-width + 15;
			@include padding(null 15px null null);
			> img { width: 100%; }
		}
		.item-title {
			font-size: $font-size-small;
			font-weight: normal;
			@include padding(null 20px null null);
			margin-bottom: floor($line-height-computed / 4);
			> a {
				color: $nav-link-color;
				text-decoration: none;
				&:hover, &:focus {
					color: $nav-link-hover-color;
					text-decoration: none;
				}
			}
		}
		.item-price {
			font-size: $font-size-small;
			color: $gray;
			@include margin(null null 0 null);
		}
		.close-btn {
			color: inherit;
			font-size: $font-size-base;
			@include position(absolute, -3px -4px null null);
			&:hover { color: $brand-danger; }
		}
	}
	.cart-subtotal {
		display: table;
		width: 100%;
		.column {
			display: table-cell;
			vertical-align: top;
			width: 50%;
		}
		> span {
			display: block;
			font-size: $font-size-small;
			color: $gray;
		}
		.amount {
			font-size: $font-size-small;
			color: $gray-dark;
			font-weight: 500;
			text-align: right;
			float: right;
		}
		& + .text-center {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 13px;
			position: relative;
			overflow: hidden;
			& .btn { @include margin(null 0); }
		}
	}
	.cart-buttons {
		display: table;
		width: 100%;
		.column {
			display: table-cell;
			vertical-align: top;
			width: 50%;
		}
	}
}
.toolbar .inner .cart-btn:hover {
	.cart-dropdown {
		display: block;
		@include animation(slideUp .4s);
	}
}

// Main Navigation
.main-navigation {
	display: block;
	z-index: 5;
	@include square(100%);
	padding: {
		right: ($toolbar-width-desktop + 50);
	}
	> .menu {
		list-style: none;
		@include padding(0);
		@include margin(0);
		li > a {
			display: block;
			color: $nav-link-color;
			font: {
				size: $nav-link-font-size;
				weight: normal;
			}
			text: {
				transform: uppercase;
				decoration: none;
			}
		}
		> li {
			display: inline-block;
			position: relative;
			> a {
				line-height: ($navbar-min-height - 2);
				@include padding(null 30px null null);
			}
			&.current-menu-item > a,
			&.current_page_item > a,
			&.current-menu-ancestor > a,
			&.current-menu-parent > a,
			&:hover > a,
			&.active > a { color: $nav-link-hover-color; }

			// Sub-Menu
			.sub-menu {
				display: none;
				width: $submenu-width;
				list-style: none;
				text-align: left;
				background-color: $submenu-bg-color;
				border: $submenu-border;
				@include padding(20px);
				@include margin(-14px 0 0 0);
				@include position(absolute, 100% null null 0);
				> li {
					position: relative;
					margin-top: 8px;
					&:first-child { margin-top: 0; }
					> a { 
						position: relative;
						font-size: $submenu-link-font-size; 
					}
					&.current-menu-item > a,
					&.current_page_item > a,
					&.current-menu-ancestor > a,
					&.current-menu-parent > a,
					&:hover > a { color: $nav-link-hover-color; }
					&.menu-item-has-children {
						> a:after {
							display: inline-block;
							vertical-align: middle;
							font-family: 'Material Icons';
							content:"\e037";
							font-size: .9em;
							@include margin(-3px null null 8px);
						}
					}
				}
				.sub-menu {
					top: 0;
					left: 100%;
					margin-top: -6px;
				}
				> li:hover {
					.sub-menu {
						display: block;
						@include animation(slideRight .4s);
					}
				}
			}
			&.menu-item-has-children {
				> a:after {
					display: inline-block;
					vertical-align: middle;
					font-family: 'Material Icons';
					content:"\e5c5";
					font-size: 1.2em;
					@include margin(-2px null null 1px);
					@include transform(rotate(0));
					@include transition(transform .3s);
				}
			}
			&:hover {
				.sub-menu {
					display: block;
					@include animation(slideUp .4s);
					.sub-menu { display: none; }
				}
			}
		}
	}
	&.text-center {
		> .menu > li > a {
			@include padding(null 15px);
		}
	}
	&.text-right {
		> .menu > li > a {
			@include padding(null 0 null 30px);
		}
	}
}

// Mobile Menu Togle
.mobile-menu-toggle {
	> i {
		position: relative;
		display: inline-block;
		font-style: normal;
		@include opacity(1);
		@include transform(translateY(0) scale(1));
		@include transition(transform .3s, opacity .15s);
	}
	&:after {
		display: block;
		font-family:'Material Icons';
		content:"\e5cd";
		margin-top: -$toolbar-toggle-icon-size;
		@include opacity(0);
		@include transform(translateY(20px) scale(0.7));
		@include transition(transform .3s, opacity .15s);
	}
	&.active {
		> i {
			@include opacity(0);
			@include transform(translateY(-20px) scale(0.7));
		}
		&:after {
			@include opacity(1);
			@include transform(translateY(0) scale(1));
		}
	}
}

// Navbar Collapse
@media #{$navbar-collapse} {
	.toolbar {
		width: $toolbar-width-mobile;
		.inner > a {
			&.mobile-menu-toggle { display: table-cell; }
		}
	}
	.toolbar .inner .cart-btn:hover .cart-dropdown {
		display: none;
	}
	.main-navigation {
		background-color: $mobile-menu-bg-color;
		overflow-y: auto;
		visibility: hidden;
		@include square(100%);
		@include opacity(0);
		@include padding(0);
		@include position(fixed, 0 null null 0);
		@include transition(visibility .3s, opacity .3s);
		> .menu {
			display: none;
			@include padding(20px 0);
			@include margin($navbar-min-height null null null);
			> li {
				display: block;
				> a {
					line-height: $line-height-base;
					@include padding(12px 15px);
				}
				.sub-menu {
					display: block;
					width: 100%;
					max-height: 0;
					text-align: center;
					background-color: $gray-lighter;
					border: 0;
					overflow: hidden;
					@include transition(all .4s);
					@include position(relative, 0 null null 0);
					@include padding(0);
					@include margin(0);
					> li {
						margin-top: 0;
						> a { @include padding(6px 15px); }
						&:hover .sub-menu {
							display: block !important;
							@include animation(none);
						}
						&.menu-item-has-children {
							> a:after {
								display: inline-block;
								vertical-align: middle;
								font-family: 'Material Icons';
								content:"\e5c5";
								font-size: 1.4em;
								@include margin(-3px null null 5px);
							}
						}
					}
					.sub-menu {
						display: block !important;
						@include animation(none);
						padding: 10px 0 !important;
						background-color: darken($gray-lighter, 3%);
						@include position(relative, 0 null null 0);
					}
				}
				&:hover .sub-menu {
					@include animation(none);
				}
				&.menu-item-has-children.active {
					> a:after {
						@include transform(rotate(180deg));
					}
					.sub-menu {
						max-height: 600px;
						@include padding(20px 0);
					}
				}
			}
		}
		&.open {
			visibility: visible;
			@include opacity(1);
			> .menu {
				display: block;
				@include animation(slideUpLong .5s);
			}
		}
	}
	.admin-bar {
		& .main-navigation .menu { @include margin(($navbar-min-height + 30) null null null); }
	}
}
@media #{$tablet-port} {
	.navbar { @include padding(null null null 15px); }
	.toolbar { right: 20px; }
}

// slideUp
@include keyframes(slideUp) {
  from {
  	@include opacity(0);
    @include transform(translate3d(0, 15px, 0));
  }
  to {
  	@include opacity(1);
    @include transform(none);
  }
}
@include keyframes(slideUpLong) {
  from {
  	@include opacity(0);
    @include transform(translate3d(0, 25px, 0));
  }
  to {
  	@include opacity(1);
    @include transform(none);
  }
}
// slideRight
@include keyframes(slideRight) {
  from {
  	@include opacity(0);
    @include transform(translate3d(-15px, 0, 0));
  }
  to {
  	@include opacity(1);
    @include transform(none);
  }
}