////
/// Menu toggle component.
///
/// @group  Components
/// @author Lee Anthony <seothemeswp@gmail.com>
/// @link   https://CustomizePro.com/
////

.menu-toggle {
	display: none;
	z-index: 5;
	min-height: 2em;
	margin: 0;
	padding: 0;
	box-shadow: none;
	align-items: center;
	justify-content: center;
	order: 3;

	@include hover-focus {
		outline: none;
		box-shadow: none;
	}

	@include mq(0, m) {
		display: flex;
	}

	.has-logo-right-mobile & {
		order: -2;
	}

	&-bar {
		z-index: 5;
		order: 1;

		.has-logo-above-mobile &,
		.has-logo-below-mobile & {
			display: flex;
			position: relative;
			width: 100vw;
			max-width: 100vw;
			margin: 0 -5vw;
			order: 2;
			justify-content: center;
			align-items: center;

			@include mq(m) {
				display: none;
			}
		}

		.has-logo-below-mobile & {
			order: -1;
		}
	}

	&-text {
		margin-left: $spacing--s;
	}

	&-icon,
	&-icon:before,
	&-icon:after {
		display: block;
		position: absolute;
		content: "";
	}

	&-icon {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		margin: auto;
	}

	&.activated {

		.menu-toggle-icon {

			&:before {
				top: 0;
				transform: rotate(45deg);
			}

			&:after {
				bottom: 0;
				transform: rotate(-45deg);
			}
		}
	}
}

.menu-overlay {
	display: none;
	opacity: 0;
	transition: opacity $base--transition-duration $base--transition-timing-function;

	@include position(fixed, -100vw null null -100vw);

	@include mq(0, m) {
		display: block;
	}

	.has-mobile-menu-top &,
	.has-mobile-menu-center & {
		display: none;
	}

	&.activated {
		z-index: 3;
		top: 0;
		left: 0;
		opacity: 1;

		@include size(100%);
	}
}