// FIXME: merge with mainmenu.less when this gets to stable
// FIXME: doesn't work in Firefox due to https://bugzilla.mozilla.org/show_bug.cgi?id=625289
// do we want to work around it?
@import "minerva.variables";
@import "minerva.mixins";

@duration: .25s;
@easing: ease-out;

.animations .alpha,
.animations .beta {
	#mw-mf-page-center {
		// *2 to avoid weird glitch of left nav flickering after closing
		@transition: @duration @easing, height 0s (@duration*2);
		.transition-transform(@transition);
	}

	#mw-mf-page-left {
		.transition(visibility 0s @duration);
	}

	.notifications-overlay.navigation-drawer {
		display: block;

		// +2% to accommodate for the border/box-shadow
		.transform(translate3d(102%, 0, 0));
		.transition-transform(@duration @easing);

		&.visible {
			.transform(translate3d(0, 0, 0));
		}
	}

	&.navigation-enabled {
		.position-fixed,
		#mw-mf-page-center {
			.transition-transform(@duration @easing);
		}
	}

	&.primary-navigation-enabled {
		.position-fixed,
		#mw-mf-page-center {
			// override non-animated version
			left: 0 !important;
			.transform(translate3d(@menuWidth, 0, 0));
		}

		#mw-mf-page-left {
			.transition(none);
		}
	}

	&.secondary-navigation-enabled {
		#mw-mf-page-center {
			// override non-animated version
			left: 0 !important;
			.transform(translate3d(-@rightDrawerWidth, 0, 0));
			width: 100%;
		}
	}

	&.rtl {
		.notifications-overlay.navigation-drawer {
			// +2% to accommodate for the border/box-shadow
			.transform(translate3d(-102%, 0, 0));

			&.visible {
				.transform(translate3d(0, 0, 0));
			}
		}

		&.primary-navigation-enabled {
			.position-fixed,
			#mw-mf-page-center {
				.transform(translate3d(-@menuWidth, 0, 0));
			}
		}

		&.secondary-navigation-enabled {
			#mw-mf-page-center {
				.transform(translate3d(@rightDrawerWidth, 0, 0));
			}
		}
	}
}

#mw-mf-page-left {
	// override non-animated version, can be removed when animation is in stable
	// and position: absolute + visibility: hidden proves to be sufficient
	display: block !important;
	position: absolute;
	z-index: 0;
	visibility: hidden;
	width: @menuWidth;
}

#mw-mf-page-center {
	min-height: 100%;
	// We need to ensure the content has a white background - otherwise it will
	// overlap the menu during the main menu reveal/hide animation
	background-color: #fff;
}

.primary-navigation-enabled {
	#mw-mf-page-left {
		// make menu scrollable when open (on small screens)
		position: static;
		visibility: visible;
	}
}