@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 @grayDrawerShadow;
	.transform( translate( 100%, 0 ) );
	.transition( transform @transition-duration-medium @transition-timing-function-menu; );

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

@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;
			}
		}
	}
}