@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 0.8em of left/right padding and 0.5em of bottom padding that we removed
		&-icon {
			margin-left: 0.8em;
		}

		&-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 #eeeeee solid;
	}

	&-group {
		cursor: default;
		padding: @bundle-group-padding;
		background-color: #f8f8f8;
		-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05),  inset 0px 2px 0px 0px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05),  inset 0px 2px 0px 0px rgba(0,0,0,0.05);
		box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05),  inset 0px 2px 0px 0px rgba(0,0,0,0.05);
		border-bottom: 1px #dddddd solid;
		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: #666666;
		}
	}
}