// FIXME: some of this could be removed if we reused .page-list styling
@import "minerva.variables";
@import "minerva.mixins";

.notifications-overlay {
	// position: fixed + sliding drawer causes weird rendering bugs in Android
	// Browser (tested on 4.0.4 and 4.2.1)
	padding-top: 0;

	.overlay-header-container {
		position: static !important;
	}

	&-overlay {
		position: absolute;
		bottom: 3.35em;
		right: 0;
		left: 0;
		z-index: 1;

		.mw-echo-ui-actionMenuPopupWidget-menu {
			padding: 0.5em;
			font-size: 1.5em;
			border: 0;
			box-shadow: none;
			border: 1px solid #666666;
			// Override the positioning of the menu
			// so it is "stuck" on the bottom of the
			// notification overlay panel
			position: static !important;
			bottom: 0 !important;
			left: 0 !important;
			width: 100% !important;
			height: auto !important;
			top: auto !important;
		}
	}

	.overlay-content {
		// this is needed not only on iOS, that's why we repeat it here even though
		// it's in Overlay.less too
		overflow-y: scroll; // has to be scroll, not auto
		position: absolute;
		top: @headerHeight;
		bottom: @headerHeight;
		width: 100%;
		margin-top: 1px;
		padding-bottom: 0;

		.mw-echo-ui-notificationsWidget {
			top: @headerHeight;
			height: 100%;
		}
	}

	.user-button {
		position: absolute;
		right: 0;
		top: 0;
		padding-right: 0;
		z-index: @z-indexOverOverlay;
	}
}

@media all and (min-width: @deviceWidthTablet) {
	.notifications-overlay {
		.mw-echo-notification {
			padding: 1.75em @contentPaddingTablet;
		}
		.overlay-header .cancel {
			// 0 because we want to have some tappable area to the left of the icon
			left: 0;
		}
		.overlay-header {
			padding-left: 0;
			padding-right: 0;
		}

		.overlay-header,
		.overlay-content {
			max-width: none;
			.content {
				margin: 0 @contentMargin;
			}
		}
	}
}