.menu {
	backface-visibility: hidden;
	display: none;
	overflow: hidden;
	outline: 0;
	position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	z-index: ($header-base + 1);
}

.menu-collapse-toggle {
	background-color: transparent !important;
	cursor: pointer;
	display: block;
	float: right;
	padding: (($nav-height - $line-height) / 2) $grid-gutter;
	position: absolute;
		top: 0;
		right: 0;
	z-index: 1;
	&:hover {
		color: $link-color !important;
	}
}

.menu-collapse-toggle-close {
	margin-top: ($font-size / -2);
	margin-left: ($font-size / -2);
	opacity: 1;
	position: absolute;
		top: 50%;
		left: 50%;
	text-align: center;
	transform: rotate(0);
	transition-duration: 0.3s;
	transition-property: opacity, transform;
	transition-timing-function: $timing;
	width: $font-size;
	.menu-collapse-toggle.collapsed & {
		opacity: 0;
		transform: rotate(-225deg);
	}
}

.menu-collapse-toggle-default {
	opacity: 0;
	transform: rotate(225deg);
	transition-duration: 0.3s;
	transition-property: opacity, transform;
	transition-timing-function: $timing;
	.menu-collapse-toggle.collapsed & {
		opacity: 1;
		transform: rotate(0);
	}
}

.menu-content {
	padding-top: $margin-base;
	padding-bottom: $margin-base;
	.nav {
		margin-top: 0;
		margin-bottom: 0;
		a,
		.a {
			color: $black-text-solid;
			font-weight: $font-weight-medium;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			&:focus,
			&:hover {
				background-color: $offwhite-solid;
			}
			.fa,
			.icon {
				margin-right: $grid-gutter;
			}
		}
		li.active {
			> a,
			> .a {
				color: $brand-color;
			}
		}
		ul {
			a,
			.a {
				font-weight: $font-weight-normal;
				padding-left: ($grid-gutter * 2);
			}
			ul {
				a,
				.a {
					font-size: $font-size-h6;
					font-weight: $font-weight-light;
					padding-top: (($nav-height - $line-height) / 4);
					padding-bottom: (($nav-height - $line-height) / 4);
					padding-left: ($grid-gutter * 3);
				}
			}
		}
	}
}

// colour
	@each $color in $palette-list-class {
		$i: index($palette-list-class, $color);

		.page-#{$color} .menu-content .nav li.active {
			> a,
			> .a {
				color: nth($palette-list-color, $i);
			}
		}
	}

.menu-content-inner {
	padding-right: $grid-gutter;
	padding-left: $grid-gutter;
}

.menu-backdrop {
	backface-visibility: hidden;
	background-color: $black;
	opacity: 0;
	position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	transition: opacity 0.3s $timing;
	z-index: $header-base;
	&.in {
		opacity: 0.5;
	}
}

.menu-logo {
	@extend .header-logo;
	border-bottom: 1px solid $black-divider-solid;
	color: $black-text-solid;
	float: none;
	height: $header-height;
	margin-right: 0;
	margin-bottom: $margin-base;
	margin-left: 0;
	padding: (($header-height - $line-height-h4) / 2) $grid-gutter (($header-height - $line-height-h4) / 2 - 1);
	&:focus,
	&:hover {
		color: $black-text-solid;
	}
	.menu-content > & {
		&:first-child {
			margin-top: ($margin-base * -1);
		}
	}
}

.menu-scroll {
	background-color: $white;
	height: 100%;
	max-width: 85%;
	max-width: calc(100% - #{$grid-gutter * 4});
	overflow-x: hidden;
	overflow-y: auto;
	position: fixed;
		top: 0;
		left: 0;
	transform: translateX(-100%);
	transition: transform 0.3s $timing;
	width: ($grid-gutter * 20);
	z-index: 1;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	.menu-right & {
		// position
			right: 0;
			left: auto;
		transform: translateX(100%);
	}
	.menu.in & {
		transform: translateX(0);
	}
	// 992
		@include responsive(md) {
			max-width: none;
		}
}

.menu-top {
	background-color: $black;
	color: $white-text-solid;
	position: relative;
	z-index: 1;
	a,
	a:focus,
	a:hover {
		color: inherit;
		text-decoration: none;
	}
}

.menu-top-img {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	overflow: hidden;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	img {
		min-height: 100%;
		width: 100%;
		opacity: 0.5;
	}
}

.menu-top-info {
	padding: $margin-sm $grid-gutter;
	position: relative;
	// 768
		@include responsive(sm) {
			padding-top: $margin-md;
			padding-bottom: $margin-md;
		}
}

.menu-top-info-sub {
	font-weight: $font-weight-light;
	padding: $margin-sm $grid-gutter;
	position: relative;
	// 768
		@include responsive(sm) {
			padding-top: $margin-md;
		}
}

.menu-top-user {
	align-items: center;
	display: flex;
}

@mixin nav-drawer() {
	background-color: transparent;
	display: block !important;
	overflow: visible;
	width: ($grid-gutter * 15);
	z-index: $header-base;
	&.in ~ .menu-backdrop {
		display: none;
		~ .menu-backdrop {
			display: block;
		}
	}
	&.menu-left {
		~ .content {
			margin-left: ($grid-gutter * 15);
			.content-heading,
			.content-inner {
				padding-left: $grid-gutter;
			}
		}
		~ .footer,
		~ .header {
			padding-left: $grid-gutter;
			// position
				left: ($grid-gutter * 15);
		}
	}
	&.menu-right {
		~ .content {
			margin-right: ($grid-gutter * 15);
			.content-heading,
			.content-inner {
				padding-right: $grid-gutter;
			}
		}
		~ .footer,
		~ .header {
			padding-right: $grid-gutter;
			// position
				right: ($grid-gutter * 15);
		}
	}
	.menu-scroll {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		transform: none;
		width: ($grid-gutter * 15);
	}
}

.nav-drawer {
	// 992
		@include responsive(md) {
			&.nav-drawer-md {
				@include nav-drawer()
			}
		}
	// 1440
		@include responsive(lg) {
			&.nav-drawer-lg {
				@include nav-drawer();
			}
		}
}