@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;
	height: 100vh;

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

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

.tcb {
	transition: all 0.3s cubic-bezier(0.79, 0.14, 0.15, 0.86);
}

.header-menu-sidebar-bg {
	background: var(--bgcolor);
	color: var(--color);
	position: relative;
	display: flex;
	flex-direction: column;
	word-wrap: break-word;
	width: 100%;
}

.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;

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

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

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

.hiding-header-menu-sidebar {

	.close-sidebar-panel {
		transition: 0.3s ease;
		opacity: 0;
	}
}

.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 .wrapper {
	left: 0;

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

.menu_sidebar_pull_right .wrapper {
	right: 0;

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

.menu_sidebar_dropdown {

	.hfg-ov {
		display: none;
	}

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

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

.menu_sidebar_full_canvas {

	.header-menu-sidebar {
		width: 100%;
		bottom: 0;
		right: 0;
		opacity: 0;
	}

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

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

//<editor-fold desc="Sidebar overlay">
.hfg-ov {
	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;

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

//</editor-fold>

.hfg-pe {
	pointer-events: none;

	.is-menu-sidebar & {
		pointer-events: unset;
	}
}
