.page-close-mobile-menu {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 100%;
	top: 0;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
}

.page-mobile-menu-opened {
	&.mobile-menu-push-to-right {
		.site {
			@extend %NormalTransition;
			transform: translateX(350px);
		}
	}

	&.mobile-menu-push-to-left {
		.site {
			@extend %NormalTransition;
			transform: translateX(-350px);
		}
	}
}

.mobile-menu-push-to-left {
	.page-mobile-main-menu {
		> .inner {
			float: right;
			transform: translateX(100%);
		}
	}
}

.mobile-menu-slide-to-left {
	.page-mobile-main-menu {
		> .inner {
			float: right;
			transform: translateX(100%);
		}
	}
}

.page-mobile-main-menu {
	--mobile-menu-heading-color: #{$heading-color};
	--mobile-menu-text-color: #{$text-color};
	--content-spacing: 20px;
	@extend %clearfix;
	@extend %FastTransition;
	@extend %LightCloseCursor;

	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999999;
	color: var(--mobile-menu-text-color);
	background: rgba(0, 0, 0, .53);
	visibility: hidden;
	opacity: 0;

	.admin-bar & {
		top: 32px;
		height: calc(100% - 32px);
	}

	> .inner {
		position: relative;
		height: 100%;
		max-width: calc(100vw - 55px);
		text-align: start;
		transition: all .3s;
		transform: translateX(-100%);
		cursor: default;
		background: #fff;
		width: 350px;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
		}
	}

	.page-mobile-menu-opened & {
		visibility: visible;
		opacity: 1;

		> .inner {
			transform: translateX(0);
		}
	}

	ul {
		margin: 0;
		padding: 0;
	}

	li {
		margin: 0;
		display: block;
		list-style-type: none;

		&.opened {
			> a {
				.toggle-sub-menu {
					&:after {
						content: $fa-angle-up;
					}
				}
			}
		}
	}

	.children {
		display: none;
		margin: 0;

		.children {
			margin-left: 10px;
		}

		> li {
			> a {
				padding: 6px 12px;

				&:hover {
					color: $heading-color;
					background: rgba(61, 61, 80, .09);
				}
			}
		}
	}

	.menu__container {
		padding: 20px 0;

		> li {

			> a {
				padding: 10px 0;
				border: 0;
				border-color: transparent;
			}

			+ li {
				> a {
					border-top: 1px solid transparent;
				}
			}

			&.opened {
				> a {
					border-bottom: 1px solid transparent;
				}
			}
		}

		a {
			position: relative;
			display: block;
			font-weight: 400;
		}
	}

	.mega-menu {
		margin-top: 14px;
		margin-bottom: 14px;
	}

	.widget_nav_menu,
	.insight-core-bmw {
		li {
			margin: 0;
			padding: 0;
			border: 0;
		}
	}

	.toggle-sub-menu {
		@extend %NormalTransition;
		position: absolute;
		top: 50%;
		right: 0;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		transform: translate(0, -50%);
		z-index: 1;

		&:after {
			@extend %FontAwesomeRegular;
			content: $fa-angle-down;
			font-size: 18px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&:hover {
			color: #000;
			background: rgba(0, 0, 0, .1);
		}
	}

	.mega-menu-content {
		.container {
			max-width: 100%;

			> .row {
				> .col-md-12 {
					padding-left: 0;
					padding-right: 0;
				}
			}
		}
	}
}

.page-mobile-menu-content {
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.mobile-menu-nav-menus {
	flex-grow: 1;
	padding: 0 var(--content-spacing);
}

.desktop-menu {
	.page-open-mobile-menu {
		display: none !important;
	}
}

@media screen and (max-width: 782px) {
	.page-mobile-main-menu {
		.admin-bar & {
			top: 46px;
			height: calc(100% - 46px);
		}
	}
}

@media screen and (max-width: 600px) {
	.page-mobile-main-menu {
		.admin-bar & {
			top: 0;
			height: 100%;
		}
	}
}

.page-mobile-main-menu {
	.mega-menu {
		.mega-menu-content {
			> .container {
				padding-left: 0;
				padding-right: 0;
			}
		}

		.elementor-row {
			flex-wrap: wrap;
		}

		.elementor-column-gap-extended > .elementor-row > .elementor-column > .elementor-element-populated {
			padding: 0;
		}

		.elementor-column {
			width: 100% !important;

			+ .elementor-column {
				margin-top: 20px;
			}
		}

		.elementor-heading-title {
			color: var(--mobile-menu-heading-color) !important;
		}

		.minimog-box:not(.minimog-banner) {
			.title {
				color: inherit !important;
			}
		}

		.minimog-list {
			.item {
				margin: 0 !important;

				a {
					padding: 10px 0;

					.text {
						line-height: 20px !important;
						color: inherit !important;
					}
				}
			}
		}

		.col-xs-12 {
			padding-left: 0;
			padding-right: 0;
		}
	}

	.tm-button-wrapper {
		margin: 12px 0 0;
	}
}

.mobile-menu-wishlist-link,
.mobile-menu-my-account {
	display: flex;
	align-items: center;
	color: var(--mobile-menu-heading-color);
	font-weight: $body-font-weight-medium;
	line-height: 24px;
	margin: 20px 0 0;

	.button-icon {
		display: flex;
		align-items: center;
		font-size: 22px;
		margin: 0 6px 0 0;

		svg {
			width: 1em;
			height: 1em;

			*[fill]:not([fill='none']) {
				fill: currentColor;
			}
		}
	}
}

.mobile-menu-social-networks {
	margin: 7px 0 0;

	&.style-icons {
		.inner {
			margin-left: -12px;
			margin-right: -12px;
		}

		a {
			display: inline-block;
			padding: 0 12px;
			font-size: 14px;
			font-weight: 300;

			i {
				vertical-align: middle;
			}
		}
	}
}

.mobile-menu-my-profile {
	display: flex;
	align-items: center;
	font-weight: $body-font-weight-medium;
	line-height: 24px;
	margin: 20px 0 0;
	padding: 0 0 4px;

	.avatar {
		width: 32px;
		flex-shrink: 0;
		margin: 0 12px 0 0;

		img {
			width: 32px;
			height: 32px;
			border-radius: 50%;
		}
	}

	.fn {
		margin: 0;
		flex-grow: 1;
		font-size: 15px;
		line-height: 24px;
		color: inherit;
	}

	&:after {
		@extend %FontAwesomeRegular;
		content: $fa-angle-right;
		font-size: 16px;
	}
}

.mobile-menu-info-list {
	margin: 30px 0 0;

	.info-list {
		margin: 0;
	}

	.info-item {
		display: flex;
		font-size: 0;

		+ .info-item {
			margin: 7px 0 0;
		}
	}

	.info-link {
		display: inline-flex;
		align-items: center;
		font-size: 14px;
		line-height: 26px;
		color: $text-color;
	}

	a.info-link {
		&:hover {
			color: $link-hover-color;
		}
	}

	.info-icon {
		font-size: 18px;
		margin-right: 9px;
	}
}

.mobile-menu-switcher-language-wrapper {
	margin: 15px 0 0;
}

.mobile-menu-components {
	padding: 0 var(--content-spacing) 50px;
}

.mobile-nav-tabs {
	display: flex;

	li {
		@extend %NormalTransition;
		flex: 1 1 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 56px;
		font-weight: 500;
		padding: 5px;
		background: #f5f5f5;
		border-bottom: 2px solid transparent;
		cursor: pointer;

		&.active {
			cursor: auto;
			color: $heading-color;
			border-color: $heading-color;
		}

		&:hover {
			color: $heading-color;
		}
	}
}
