/* menu container */
.menuOverlayMobile {
	background-color: $wcfHeaderMenuBackground;
	bottom: 0;
	display: none;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 320;

	&.open {
		display: block;

		@include screen-sm-up {
			+ .menuOverlayMobileBackdrop {
				display: block;
			}
		}
	}

	&.androidMenuTouchEnd {
		display: block;
		position: fixed;
		transition: transform 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);

		&.pageMainMenuMobile:not(.open) {
			transform: translateX(-100vw);
		}
		&.pageUserMenuMobile:not(.open) {
			transform: translateX(100vw);
		}

		@include screen-sm-up {
			&.pageMainMenuMobile:not(.open) {
				transform: translateX(-350px);
			}
			&.pageUserMenuMobile:not(.open) {
				transform: translateX(350px);
			}

			+ .menuOverlayMobileBackdrop {
				transition: left 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					right 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}
		}
	}

	> .menuOverlayItemList {
		// we use `transform: translateX()` for performance reasons
		transition: transform 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);

		/* work-around to avoid setting explicit visibility */
		visibility: visible;
	}

	&.allowScroll {
		.menuOverlayItemList:not(.hidden) {
			overflow: auto;
			-webkit-overflow-scrolling: touch;
		}
	}

	&:not(.allowScroll) {
		// block UI while switching between menus
		&::before {
			bottom: 0;
			content: "";
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 500;
		}
	}

	@include screen-xs {
		left: 0;
		max-width: 100vw;
		right: 0;

		.menuOverlayItemList {
			right: 0;
		}
	}

	@include screen-sm-up {
		width: 350px;

		&.pageMainMenuMobile {
			left: 0;

			& + .menuOverlayMobileBackdrop {
				box-shadow: inset 5px 0 10px -5px rgba(0, 0, 0, 0.6);
				left: 350px;
			}

			.menuOverlayItemList {
				left: 0;
			}
		}

		&.pageUserMenuMobile {
			right: 0;

			& + .menuOverlayMobileBackdrop {
				box-shadow: inset -5px 0 10px -5px rgba(0, 0, 0, 0.6);
				right: 350px;
			}

			.menuOverlayItemList {
				right: 0;
			}
		}
	}
}

.menuOverlayMobileBackdrop {
	background-color: rgba(0, 0, 0, 0.4);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 395;
}

.menuOverlayItemWrapper {
	display: flex;
	justify-content: flex-end;

	> .menuOverlayItemLink {
		flex: 1 1 auto;
	}
}

.menuOverlayItemList {
	background-color: $wcfHeaderMenuBackground;
	height: 100%;
	list-style-type: none;
	margin: 0;
	padding: 5px 0;
	position: absolute;
	top: 0;
	left: -1px;
	bottom: 0;
	width: calc(100vw + 1px);
	z-index: 450;

	@include screen-sm-up {
		width: 350px;
	}

	&:not(.activeList) {
		display: none;
	}
}

.menuOverlayItemSpacer {
	margin-top: 25px;

	/* avoid successive spacers piling up */
	& + .menuOverlayItemSpacer {
		display: none;
	}
}

.menuOverlayItem {
	&:not(:last-child) {
		margin-bottom: 1px;
	}

	/* nested item list */
	> .menuOverlayItemList {
		margin-left: 100%;
		z-index: 500;
	}
}

.menuOverlayItemLink,
.menuOverlayTitle,
.menuOverlayBackLink {
	color: $wcfHeaderMenuLink;
	display: block;
	font-size: 14px;
	padding: 10px 30px;
	position: relative;
}

.menuOverlayItemLink {
	align-items: center;
	background-color: $wcfHeaderMenuLinkBackground;
	display: flex;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	.icon::before {
		color: $wcfHeaderMenuLink;
	}

	&:hover {
		color: $wcfHeaderMenuLinkActive;
	}

	/* wrapper class for links containing an additional badge */
	&.menuOverlayItemBadge {
		align-items: center;
		display: flex;
		padding-right: 10px;

		/* different padding if there is no additional icon after the link,
		   ensures proper alignment for links with badges containing a child
		   item list */
		&:last-child {
			/* 55px = 10px padding + 1px margin + icon */
			/* icon = 2x 10px padding + 16px width */
			padding-right: 55px;
		}

		> .menuOverlayItemTitle {
			flex: 1 1 auto;
		}

		> .badge {
			flex: 0 0 auto;
		}
	}

	&.menuOverlayItemLinkMore::after {
		color: $wcfHeaderMenuLink;
		content: $fa-var-angle-right;
		display: block;
		font-family: FontAwesome;
		font-size: 18px;
		position: absolute;
		right: 18px;
		top: 50%;
		transform: translateY(-50%);
	}

	.menuOverlayItemTitle {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* fix icons in rtl design */
html[dir="rtl"] .menuOverlayItemLink.menuOverlayItemLinkMore::after {
	content: $fa-var-angle-left;
}

.pageUserMenuMobile .menuOverlayItemBadge:last-child {
	padding-right: 10px !important;
}

.menuOverlayItemLink.active,
.menuOverlayItemLinkIcon.active {
	background-color: $wcfHeaderMenuLinkBackgroundActive;
	color: $wcfHeaderMenuLinkActive;
}

.menuOverlayItemLinkIcon.active > .icon::before {
	color: $wcfHeaderMenuLinkActive;
}

.menuOverlayTitle {
	color: rgba($wcfHeaderMenuLink, 0.7);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	&:not(:first-child) {
		margin-top: 10px;
	}
}

/* icon link sharing the space with a link or (header only) the logo */
.menuOverlayItemLinkIcon {
	background-color: $wcfHeaderMenuLinkBackground;
	flex: 0 0 auto;
	margin-left: 1px;
	padding: 10px;

	/* force explicit dimensions because no each .icon24 is of equal height/width */
	height: 44px;
	width: 44px;

	> .icon::before {
		color: $wcfHeaderMenuLink;
	}
}

.menuOverlayBackLink::before {
	color: rgba($wcfHeaderMenuLink, 0.7);
	content: $fa-var-angle-left;
	display: block;
	font-family: FontAwesome;
	font-size: 18px;
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.menuOverlayLogoWrapper {
	flex: 1 1 auto;
	padding: 5px;
	display: flex;

	.menuOverlayLogo {
		flex: 1 1 auto;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}