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

.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 @box-shadow-color-drawer;
	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;
			}
		}
	}
}