// Component of ui.less
// FIXME: Move to components/
@import '../../minerva.less/minerva.variables';
@import '../../minerva.less/minerva.mixins';

/* stylelint-disable no-descending-specificity */

// .menu
#mw-mf-page-left {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	min-width: 275px;

	@media screen and ( min-width: @width-breakpoint-tablet ) {
		min-width: @width-breakpoint-mobile;
	}
	// It should always be possible to dismiss the menu by tapping outside of it.
	max-width: 80%;
	z-index: @z-indexDrawer;
	// Add vertical scrollbar as needed.
	overflow-y: auto;
	background-color: @primaryNavBackgroundColor;
	.transform( translate( -100%, 0 ) );

	ul {
		padding-bottom: 22px;
	}
}

.primary-navigation-enabled {
	overflow: hidden;
	// Necessary to disable scrolling on Android and iOS devices.
	touch-action: none;
}

.animations {
	// .menu
	#mw-mf-page-left {
		.transition( transform @menu-animation-duration @menu-animation-easing; );
	}

	&.primary-navigation-enabled {
		// .menu
		#mw-mf-page-left {
			.transform( translate( 0, 0 ) );
		}

		.transparent-shield {
			visibility: visible;
			opacity: 0.5;
		}
	}
}

// Special:MobileMenu
.navigation-full-screen {
	// .menu
	#mw-mf-page-left {
		max-width: none;
		transform: none;
	}
}