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

.drawer {
	background-color: @background-color-interactive-subtle;
	// needed for Android 4.x
	position: absolute;
}

// Basic toast notification
//
// Toast must have visible class to be shown
//
// Markup:
// <div class="toast visible">
//  Notification for user.
// </div>
// <div class="mw-notification-area">
//  <div class="mw-notification">Notification 1 for user.</div>
//  <div class="mw-notification">Notification 2 for user.</div>
// </div>
.mw-notification-area,
.toast,
.drawer {
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	// don't allow notifications to cover the entire screen
	max-height: 50%;
	// needs to be higher than for overlays to show on top of overlays
	z-index: @z-index-over-overlay;
}

.mw-notification,
.toast,
.drawer {
	box-sizing: border-box;
	box-shadow: @box-shadow-drop-xx-large;
	word-wrap: break-word;
	// don't use visibility: hidden in old browsers that don't support animations
	display: none;

	&.visible,
	&.mw-notification-visible {
		display: block;
	}
}