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

.drawer {
	background-color: var( --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: 0 -1px 8px 0 @box-shadow-color-base;
	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;
	}
}