.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 {
	align-items: center;
	cursor: pointer;
	display: flex;
	height: 100%;
	padding: 0 $grid-gutter;
	position: absolute;
		top: 0;
		right: 0;
	z-index: 1;
	&:focus,
	&:hover {
		outline: 0;
		text-decoration: none;
	}
}

.menu-collapse-toggle-close,
.menu-collapse-toggle-default {
	transition-duration: 0.3s;
	transition-property: opacity, transform;
	transition-timing-function: $timing;
}

.menu-collapse-toggle-close {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	opacity: 1;
	position: absolute;
		top: 0;
		left: 0;
	transform: rotate(0);
	width: 100%;;
	.menu-collapse-toggle.collapsed & {
		opacity: 0;
		transform: rotate(-225deg);
	}
}

.menu-collapse-toggle-default {
	opacity: 0;
	transform: rotate(225deg);
	.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;
			&:focus,
			&:hover {
				background-color: $offwhite-solid;
			}
		}
		li.active {
			> a,
			> .a {
				color: $brand-color;
			}
		}
		ul {
			a,
			.a {
				font-weight: $font-weight-normal;
				min-height: ($nav-height * 0.75);
				padding-left: ($grid-gutter * 2);
			}
			ul {
				a,
				.a {
					font-size: $font-size-h6;
					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 {
	align-items: center;
	border-bottom: 1px solid $black-divider-solid;
	color: $black-text-solid;
	display: flex;
	font-size: $font-size-h4;
	font-weight: $font-weight-light;
	line-height: $line-height-h4;
	margin-bottom: $margin-base;
	min-height: $header-height;
	padding: 0 $grid-gutter;
	&[href]:focus,
	&[href]:hover {
		color: $black-text-solid;
		outline: 0;
		text-decoration: none;
	}
	.menu-content > & {
		&:first-child {
			margin-top: ($margin-base * -1);
		}
	}
	img {
		display: block;
		max-height: ($header-height * 0.75);
		width: auto;
	}
}

.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;
	> * {
		flex-shrink: 0;
	}
}

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