/* LAYOUT: HEADER
-------------------------------------------- */

.vlt-header--default,
.vlt-header--slide,
.vlt-header--fullscreen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	color: var(--vlt-color-dark);
	z-index: z("header");

	&.vlt-header--opaque {
		position: relative;
	}

	&:not(.vlt-header--opaque) {
		@include admin-sticky-fix;
	}

	&.vlt-header--dark {
		color: var(--vlt-color-white);
	}

}

.vlt-no-menu-message {
	margin-bottom: 0;
	@include vlt_primary_regular_15;

	a:hover {
		color: var(--vlt-accent-1);
	}

}

// navbar logo
.vlt-navbar-logo {
	@extend %vlt_navbar_logo;
}

// navbar
.vlt-navbar {
	position: relative;
	z-index: z("navbar");

	// navbar inner
	.vlt-navbar-inner {
		display: flex;
		width: 100%;
		min-height: var(--vlt-navbar-min-height);
	}

	// navbar border bottom
	&.vlt-navbar--border-bottom {
		box-shadow: inset 0 -1px var(--vlt-color-gray-0p2);

		.vlt-header--dark & {
			box-shadow: inset 0 -1px var(--vlt-color-white-0p2);
		}

	}

	// fixed navbar
	&.vlt-navbar--fixed {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		box-shadow: var(--vlt-box-shadow);
		@include admin-sticky-fix-default;

		&.vlt-navbar--sticky {
			animation: vlt_fade_in_down calc(var(--vlt-transition-duration) * 2) var(--vlt-transition-easing) forwards;
		}

		&.vlt-on-scroll-show {
			animation: vlt_fade_in_down calc(var(--vlt-transition-duration) * 2) var(--vlt-transition-easing) forwards;
		}

		&.vlt-on-scroll-hide {
			animation: vlt_fade_out_up var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;
		}

	}

	// transparent navbar
	&.vlt-navbar--transparent {
		background-color: transparent;
	}

	// solid navbar
	&,
	&.vlt-navbar--solid {
		background-color: var(--vlt-color-white);
	}

	// transparent always navbar
	&.vlt-navbar--transparent-always {
		background-color: transparent;
	}

	// white text on top
	&.vlt-navbar--white-text-on-top:not(.vlt-navbar--solid) {
		color: var(--vlt-color-white);

		.vlt-navbar-logo {

			img.black {
				display: none;
			}

			img.white {
				display: block;
			}

		}

	}

}

/* BURGER MENU
-------------------------------------------- */

.vlt-menu-burger {
	display: flex;
	align-items: end;
	flex-direction: column;

	> span {
		width: 24px;
		height: 2px;
		margin-top: 3px;
		margin-bottom: 3px;
		background-color: currentColor;
		transition: transform var(--vlt-transition-duration) var(--vlt-transition-easing), opacity var(--vlt-transition-duration) var(--vlt-transition-easing);
		transform-origin: center right;
		will-change: transform, opacity;

		&:nth-child(2) {
			transform: scaleX(.5);
		}

	}

	&:hover > span:nth-child(2) {
		transform: scaleX(1);
	}

	&.is-open > span {

		&:nth-child(1) {
			transform: rotate(-45deg) translateX(.5px);
		}

		&:nth-child(2) {
			opacity: 0;
		}

		&:nth-child(3) {
			transform: rotate(45deg) translateX(.5px);
		}

	}

}

/* SITE OVERLAY
-------------------------------------------- */

.vlt-site-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	background-color: var(--vlt-color-dark-0p2);
	opacity: 0;
	transition: opacity calc(var(--vlt-transition-duration) * 2) var(--vlt-transition-easing);
	z-index: z("site-overlay");
}

/* NAV
-------------------------------------------- */

.vlt-nav {

	.vlt-nav-table {
		display: flex;
		width: 100%;
		height: 100%;
		flex-direction: column;

		&--row {
			flex-direction: row;
		}

		>* {
			flex: 0 0 auto;
		}

		>.vlt-nav,
		>.vlt-nav-row--full {
			flex: 1 1 100%;
		}

		.vlt-nav-row--full {
			min-height: 0;
			overflow: hidden;
			overflow-y: auto;
		}

		>.vlt-nav-row--center {
			display: flex;
			flex-direction: column;

			>* {
				margin-top: auto;
				margin-bottom: auto;
			}

		}

		>.vlt-nav-row--bottom {
			display: flex;

			>* {
				margin-top: auto;
			}

		}

	}

}

%vlt_default_navigation {

	ul.sf-menu {
		flex-shrink: 0;

		li {

			.menu-item-icon {
				line-height: 1;

				svg {
					height: 1em;
				}

			}

		}

		> li {
			display: inline-flex;
			align-items: center;
			float: none;
			min-height: 100%;

			> a {
				display: inline-flex;
				align-items: center;
				padding: px2rem(6px) px2rem(18px);
				@include vlt_primary_bold_16;

				.menu-item-text {
					position: relative;

					&::before {
						content: "";
						position: absolute;
						right: 0;
						bottom: 0;
						left: 0;
						height: 2px;
						background-color: currentColor;
						transition: transform var(--vlt-transition-duration) var(--vlt-transition-easing);
						transform: scaleX(0);
						transform-origin: center left;
						will-change: transform;
					}

				}

				.menu-item-icon {
					display: none;
				}

			}

			&:first-of-type > a {
				padding-left: 0;
			}

			&:last-of-type > a {
				padding-right: 0;
			}

			&:hover > a,
			&.current-menu-item > a,
			&.current-menu-ancestor > a,
			&.sfHover > a {

				.menu-item-text::before {
					transform: scaleX(1);
				}

			}

			&.two-columns > ul.sub-menu {
				column-count: 2;
			}

		}

		li.left ul.sub-menu {
			margin-right: px2rem(-18px);
			margin-left: 0;
		}

		// submenu
		ul.sub-menu {
			min-width: px2rem(240px);
			padding: px2rem(20px) 0;
			margin-left: px2rem(-18px);
			background-color: var(--vlt-color-white);
			border-radius: var(--vlt-border-radius-sm);
			box-shadow: var(--vlt-box-shadow);

			ul.sub-menu {
				top: px2rem(-20px);
				margin-right: 0;
				margin-left: 0;
			}

			&:hover > li > a {
				opacity: var(--vlt-hover-opacity);
			}

			li {
				display: block;
				padding: px2rem(6px) px2rem(36px);

				a {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: var(--vlt-color-dark);
					white-space: nowrap;
					@include vlt_primary_medium_15;

					.menu-item-icon {
						margin-left: auto;
						font-size: .8em;
						transition: inherit;
					}

				}

				&:hover > a,
				&.current-menu-item > a,
				&.current-menu-ancestor > a,
				&.sfHover > a {
					opacity: 1;
				}

				&.sfHover > a .menu-item-icon {
					transform: rotate(90deg);
				}

			}

		}

	}

}

%vlt_medium_navigation {

	ul.sf-menu {
		position: relative;
		display: flex;
		width: 100%;
		flex-direction: column;

		&:hover li a {
			opacity: var(--vlt-hover-opacity);
		}

		// All levels
		li {
			float: unset;

			&:hover > a,
			&.current-menu-item > a,
			&.current-menu-ancestor > a {
				opacity: 1;
			}

			.menu-item-icon {
				line-height: 1;

				svg {
					height: 1em;
				}

			}

		}

		// First level
		> li {

			> a {
				display: flex;
				align-items: center;
				padding: px2rem(10px) 0;
				color: var(--vlt-color-dark);
				@include vlt_primary_semibold_18;

				.menu-item-text {
					position: relative;

					&::before {
						content: "";
						position: absolute;
						right: 0;
						bottom: 0;
						left: 0;
						height: 2px;
						background-color: currentColor;
						transition: transform var(--vlt-transition-duration) var(--vlt-transition-easing);
						transform: scaleX(0);
						transform-origin: center left;
						will-change: transform;
					}

				}

				.menu-item-icon {
					margin-left: auto;
					font-size: .8em;
				}

			}

			&:hover > a,
			&.current-menu-item > a,
			&.current-menu-ancestor > a,
			&.sfHover > a {

				.menu-item-text::before {
					transform: scaleX(1);
				}

			}

			&.sfHover > a .menu-item-icon {
				transform: rotate(90deg);
			}

		}

		// Second level
		ul.sub-menu {
			position: static;
			width: 100%;

			li {

				a {
					display: flex;
					align-items: center;
					padding: px2rem(4px) 0;
					color: var(--vlt-color-dark);
					@include vlt_primary_medium_15;

					.menu-item-icon {
						margin-left: auto;
						font-size: .8em;
					}

				}

				&.sfHover > a .menu-item-icon {
					transform: rotate(90deg);
				}

			}

			// Third level
			ul.sub-menu {
				padding: px2rem(8px) 0 px2rem(8px) px2rem(8px);
				margin: px2rem(-8px) 0;
			}

		}

	}

}

%vlt_large_navigation {

	ul.sf-menu {
		position: relative;
		display: flex;
		width: 100%;
		flex-direction: column;

		&:hover li a {
			opacity: var(--vlt-hover-opacity);
		}

		// All levels
		li {
			float: unset;

			&:hover > a,
			&.current-menu-item > a,
			&.current-menu-ancestor > a {
				opacity: 1;
			}

		}

		// First level
		> li {

			> a {
				display: inline-flex;
				align-items: center;
				padding: px2rem(12px) 0;
				color: var(--vlt-color-dark);
				@include vlt_primary_bold_40;

				.menu-item-text {
					position: relative;

					&::before {
						content: "";
						position: absolute;
						right: 0;
						bottom: 0;
						left: 0;
						height: 2px;
						background-color: currentColor;
						transition: transform var(--vlt-transition-duration) var(--vlt-transition-easing);
						transform: scaleX(0);
						transform-origin: center left;
						will-change: transform;
					}

				}

				.menu-item-icon {
					display: none;
				}

			}

			&:hover > a,
			&.current-menu-item > a,
			&.current-menu-ancestor > a,
			&.sfHover > a {

				.menu-item-text::before {
					transform: scaleX(1);
				}

			}

		}

		// Second level
		ul.sub-menu {
			position: static;
			width: 100%;

			li {

				a {
					display: inline-flex;
					align-items: center;
					padding: px2rem(4px) 0;
					color: var(--vlt-color-dark);
					@include vlt_primary_medium_15;

					.menu-item-icon {
						display: none;
					}

				}

			}

			// Third level
			ul.sub-menu {
				padding: px2rem(8px) 0 px2rem(8px) px2rem(8px);
				margin: px2rem(-8px) 0;
			}

		}

	}

}

@import "header/top-bar";
@import "header/default";
@import "header/aside";
@import "header/slide";
@import "header/fullscreen";