@import 'mediawiki.mixins';
@import '../echo.variables';

.mw-echo-ui-crossWikiNotificationItemWidget,
.mw-echo-ui-bundleNotificationItemWidget {
	// Remove the padding that ItemWidget puts in
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;

	// This is an abbreviation for the pieces that make up
	// the face of the cross-wiki notification item
	// without the inner group items
	.mw-echo-ui-notificationItemWidget {
		// Compensate for the 1em of left/right padding and 0.5em of bottom padding that we removed
		&-icon {
			margin-left: 1em;
		}

		&-content {
			// The icon is 30px
			margin-left: 30px;

			padding-bottom: 1em;
			// 0.8em from ItemWidget, plus 0.8em
			padding-left: 1.6em;
			padding-right: 0.8em;

			.mw-echo-ui-notificationItemWidget-markAsReadButton {
				margin-right: -0.8em;
			}
		}

		&-icon,
		&-content {
			// There's no link but there is a click action, so change the cursor to indicate that (T138913)
			cursor: pointer;
		}
	}

	&-separator {
		display: block;
		position: absolute;
		bottom: 0.4em;
		width: 100%;
		border-bottom: 1px solid #eaecf0;

		.mw-echo-ui-crossWikiNotificationItemWidget-expanded &,
		.mw-echo-ui-bundleNotificationItemWidget-expanded & {
			display: none;
		}
	}

	&-group {
		cursor: default;
		padding: @bundle-group-padding;
		background-color: #f8f9fa;
		.box-shadow( inset 0 -2px 0 0 rgba( 0, 0, 0, 0.05 ), inset 0 2px 0 0 rgba( 0, 0, 0, 0.05 ); );
		margin-bottom: 0.4em;
	}

	.mw-echo-ui-subGroupListWidget-header {
		margin-bottom: @bundle-group-padding;

		&-row-title {
			// Override OOUI's line height for labels
			line-height: 1em !important;
			font-weight: bold;
			color: @grey-medium;
		}
	}
}