// FIXME: some of this could be removed if we reused .page-list styling
@import 'mobile.variables';
@import 'mediawiki.ui/variables';
@import 'mediawiki.mixins.less';

.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;

	&-header-markAllRead {
		padding-right: 1em;
	}

	.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;
			box-shadow: none;
			border: 1px solid @colorGray10;
			// 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;
		width: 100%;
		margin-top: 1px;
		padding-bottom: 0;

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

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