@import "../vars";

.header-menu-sidebar {
	padding: 0;
	position: fixed;
	max-width: 100%;
	top: 0;
	z-index: $menu_sidebar_active_z_index;
	visibility: hidden;
	display: flex;
	transition: all 0.3s cubic-bezier(0.79, 0.14, 0.15, 0.86);
	height: 100vh;

	/* Close Button */
	.navbar-toggle-wrapper {
		display: flex;
		justify-content: flex-end;
		padding: 8px 10px;

		button.navbar-toggle {
			position: relative;
		}
	}
}

.header-menu-sidebar-bg {
	background-color: var(--bgColor);
	color: var(--color);
	position: relative;
	display: flex;
	flex-direction: column;
	word-wrap: break-word;
	width: 100%;
	box-shadow: rgba(149,157,165, 0.1) 0 14px 14px;
}

.header-menu-sidebar-inner {
	padding: 20px 0;
	overflow-x: hidden;
	height: 100%;
	// We need to use display none on elements
	// that should not be tabbable in the viewport
	// otherwise they will be considered when navigating with keyboard.
	display: none;

	opacity: 0;
	transition: opacity 0.3s ease;

	&.container {
		max-width: calc(var(--container) - var(--grid-gutter-width));
	}

	.is-menu-sidebar & {
		display: block;
		opacity: 1;
	}

	.hiding-header-menu-sidebar & {
		display: block;
		transition: all 0.3s ease;
		opacity: 0;
	}

	.item--inner {
		width: 100%;
	}
}

.menu_sidebar_slide_left {
	.header-menu-sidebar {
		left: 0;
		transform: translateX(-100%);
	}
}

.menu_sidebar_slide_right {
	.header-menu-sidebar {
		right: 0;
		transform: translateX(100%);
	}
}

.menu_sidebar_pull_left {
	left: 0;

	.header-menu-sidebar {
		left: 0;
		transform: translateX(-100%);
	}
	.svq-page-wrapper {
		left: 0;
		transition: all .3s cubic-bezier(.79,.14,.15,.86);
	}
	&.is-menu-sidebar {
		.svq-page-wrapper {
			left: 360px;
		}
	}
}

.menu_sidebar_pull_right {
	right: 0;

	.header-menu-sidebar {
		right: 0;
		transform: translateX(100%);
	}
	.svq-page-wrapper {
		right: 0;
		transition: all .3s cubic-bezier(.79,.14,.15,.86);
	}
	&.is-menu-sidebar {
		.svq-page-wrapper {
			right: 360px;
		}
	}
}

.menu_sidebar_dropdown {
	.header-menu-sidebar-overlay {
		display: none;
	}

	.header-menu-sidebar {
		box-shadow: none;
		position: absolute;
		top: unset;
		width: 100%;
		display: block;

		.close-sidebar-panel {
			width: 100%;
			max-width: calc(var(--container) - var(--grid-gutter-width));
			margin: 0 auto;
		}
	}

	.header-menu-sidebar-inner {
		transition: all 0.3s cubic-bezier(0.79, 0.14, 0.15, 0.86);
		max-height: 0;
		padding: 0;
	}
}

.menu_sidebar_full_canvas {
	.header-menu-sidebar {
		width: 100%;
		bottom: 0;
		right: 0;
		opacity: 0;
		transition: all 0.3s cubic-bezier(0.79, 0.14, 0.15, 0.86);
	}

	.header-menu-sidebar-inner {
		flex-grow: 1;
	}
}

/* Showing Menu Sidebar animation. */
.is-menu-sidebar {
	.header-menu-sidebar {
		visibility: visible;
	}

	&.menu_sidebar_slide_left {
		.header-menu-sidebar {
			transform: translate3d(0, 0, 0);
			left: 0;
		}
	}

	&.menu_sidebar_slide_right {
		.header-menu-sidebar {
			transform: translate3d(0, 0, 0);
			right: 0;
		}
	}

	&.menu_sidebar_pull_left {
		.header-menu-sidebar {
			transform: translateX(0);
		}
	}

	&.menu_sidebar_pull_right {
		.header-menu-sidebar {
			transform: translateX(0);
		}
	}

	&.menu_sidebar_dropdown {
		.header-menu-sidebar {
			height: auto;
		}

		.header-menu-sidebar-inner {
			max-height: 400px;
			padding: 20px 0;
		}
	}

	&.menu_sidebar_full_canvas {
		.header-menu-sidebar {
			opacity: 1;
		}
	}
}

.header-menu-sidebar .menu-item-nav-search {
	display: flex;
	align-items: center;
}

//<editor-fold desc="Sidebar overlay">
.header-menu-sidebar-overlay {
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	transform: translate3d(0, 0, 0);
	z-index: $menu_sidebar_active_z_index - 1;
	transition: all 0.3s linear;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	.is-menu-sidebar & {
		visibility: visible;
		opacity: 1;
		pointer-events: unset;
	}
}

//</editor-fold>
