/* Toggle nav
--------------------------------------------------------------*/
// Toggle icon
// - Toggle icon X

// -------------------------------------------------------------
// Toggle icon
// -------------------------------------------------------------
.menu-toggle {
	@media (max-width: $screen-md-max) {
		// position: absolute;
		// right: 0;
		// top: 0;
		height: 4rem;
		width: 4rem;
		background: $primary;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 110;

		span {
			@include text-hide();
			position: relative;
			display: block;
			width: 2rem;
			height: 0.2rem;
			background: white;
			@include transition-base();

			&:before,
			&:after {
				content: "";
				position: absolute;
				background: white;
				width: 2rem;
				height: 0.2rem;
				left: 50%;
				transform: translateX(-50%);
				@include transition-base();
			}

			&:before {
				top: -0.9rem;
			}

			&:after {
				top: 0.9rem;
			}
		}
	}

	@media (min-width: $screen-lg) {
		display: none;
	}
}

// - Toggle icon X
// -------------------------------------------------------------
.menu-toggle[aria-expanded="true"] {
	@media (max-width: $screen-md-max) {
		span {
			background: transparent;

			&:before,
			&:after {
				top: 50%;
			}

			&:before {
				background: white;
				transform: translateX(-50%) translateY(-50%) rotate(45deg);
			}

			&:after {
				background: white;
				transform: translateX(-50%) translateY(-50%) rotate(-45deg);
			}
		}
	}
}