@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';

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

.notifications-overlay {
	visibility: visible;
}

// needs to be more specific than .overlay rules
.notifications-overlay.navigation-drawer {
	display: block;
	width: auto;
	right: 0;
	box-shadow: -5px 0 0 0 rgba( 0, 0, 0, 0.3 );
}

@media all and ( min-width: @width-breakpoint-tablet ) {
	@rightDrawerLeftOffset: 100% - @rightDrawerWidth;

	.notifications-overlay.navigation-drawer {
		left: @rightDrawerLeftOffset;

		.overlay-header {
			margin: 0; // T210191
			width: 100%; // T218731
			// T170903
			max-width: none;

			.cancel {
				// 0 because we want to have some tappable area to the left of the icon
				left: 0;
			}
		}
	}
}

.animations {	// FIXME: Make animations a conditional class on the drawer itself
	.notifications-overlay.navigation-drawer {
		.transform( translate( 100%, 0 ) );
		.transition( transform @menu-animation-duration @menu-animation-easing; );

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

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