@import '../echo.variables';

.mw-echo-ui-subGroupListWidget {

	&:not(:first-child) {
		padding-top: @bundle-group-padding;
	}

	&-header {
		display: table;
		width: 100%;

		&-row {
			display: table-row;

			&-title {
				display: table-cell;
				width: 100%;
				vertical-align: bottom;
			}

			&-markAllReadButton {
				display: table-cell;
				text-align: right;
			}
		}
	}

	.mw-echo-ui-sortedListWidget {
		margin-bottom: @bundle-group-padding / 2;
	}

	.mw-echo-ui-notificationItemWidget {
		padding: 0.5em;
		border: 1px solid #DDDDDD;
		box-sizing: border-box;

		&:not(:last-child) {
			border-bottom: 0;
		}

		&-icon img {
			height: 1.5em;
			width: 1.5em;
		}

		&-content {
			padding-left: 0.5em + 1.5em;
		}

		&-markAsReadButton {
			padding-top: 0;
		}
	}
}