@import '../echo.variables';
.mw-echo-ui-notificationsInboxWidget {
	display: table;
	width: 100%;
	max-width: @specialpage-width;
	position: relative;

	&-row {
		display: table-row;
		width: 100%;
	}

	&-toolbarWrapper {
		height: 4em;
	}

	&-cell {
		display: table-cell;
		vertical-align: middle;
		&-placeholder {
			display: table-cell;
			width: 100%;
		}
	}

	&-sidebar {
		width: @specialpage-sidebar-width;
		padding-right: 1em;
		vertical-align: top;

		@media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
			// Hide the sidebar for small screens
			display: none;
		}
	}
	&-main {
		vertical-align: top;

		&-toolbar {
			&-top {
				display: table;
				width: 100%;
			}

			&-affixed {
				position: fixed;
				z-index: 2;
				top: 0;
				background: #fff;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
				box-shadow: 0 2px 0 0 rgba( 0, 0, 0, 0.1 );
			}

			&-settings {
				padding-left: 1em;
			}
		}
	}

	@media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
		// Override table-layout for the top toolbar so we get
		// filters and pagination under one another
		&-main {
			&-toolbar {
				&-top {
					display: block;
					margin-bottom: 1em;

					.mw-echo-ui-notificationsInboxWidget-row {
						display: block;
						text-align: center;
					}
				}
				&-readState {
					display: inline-block;
				}
				&-settings,
				&-pagination {
					display: inline-block;
					margin-top: 1em;
				}
				&-settings {
					.oo-ui-popupWidget-popup {
						text-align: left;
					}
				}
			}
		}
		&-toolbarWrapper {
			height: 8em;
		}
	}
}