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

.mw-echo-ui-notificationItemWidget {
	padding: 1em 0.5em;
	background-color: #F1F1F1;
	border-bottom: 1px solid #DDDDDD;
	white-space: normal;
	line-height: 16px;

	&:hover > a {
		text-decoration: none;
		color: @notification-text-color;
	}

	&:not(:hover) a,
	#p-personal &:not(:hover) a.new {
		color: @notification-text-color;
	}

	&:last-child {
		border-bottom: none;
	}

	&-icon {
		img {
			height: 30px;
			width: 30px;
		}

		position: absolute;
	}

	&-content {
		display: inline-block;
		// The icon is 30px and has a 1em right margin
		padding-left: ~"calc(30px + 1em)";
		box-sizing: border-box;
		width: 100%;

		&-message {
			&-body {
				color: @notification-body-color;
			}
		}

		&-actions {
			margin-top: 0.5em;
			font-size: 0.8em;

			&-button {
				&:not(:last-child) {
					margin-right: 0.5em;
				}

				.oo-ui-buttonElement-button {
					.mw-echo-ui-mixin-hover-opacity;

					.oo-ui-labelElement-label {
						// We have to override oojs-ui's color, which uses
						// a very specific selector
						font-weight: normal !important;
						color: #000 !important;
					}
				}
			}

			&-menu {
				.oo-ui-buttonElement-button {
					.mw-echo-ui-mixin-hover-opacity;
				}

				.oo-ui-popupWidget-popup {
					font-size: 1 / 0.8em;
					padding: 0.5em;
				}
			}

			&-timestamp {
				float: right;
				color: black;
				opacity: @opacity-low;
			}

		}
	}

	// Table layout only for the content inside bundles
	&-bundle {
		display: table;
		width: ~"calc( 100% - " @bundle-group-padding ~");";

		.mw-echo-ui-notificationItemWidget-content {
			display: table-row;

			.mw-echo-ui-notificationItemWidget {
				// CSS table layout
				&-icon,
				&-content-message,
				&-content-actions,
				&-markAsReadButton {
					display: table-cell;
					vertical-align: top;
				}

				// Positioning fixes for bundled items
				&-icon {
					position: relative;
					padding-right: 0.5em;
				}

				&-content-message {
					display: inline-block;

					&-header {
						width: 18em;
					}
				}

				&-content-actions {
					&-row {
						display: table-row;
					}

					&-buttons {
						display: table-cell;
						vertical-align: middle;
					}

					&-menu {
						display: table-cell;
						vertical-align: middle;
					}

					&-timestamp {
						float: none;
						display: table-cell;
						vertical-align: middle;
						padding-right: 0.5em;
					}
				}

				&-markAsReadButton {
					width: 1em;
					float: none;
				}

			}
		}
	}

	&-markAsReadButton {
		.mw-echo-ui-mixin-hover-opacity;
		float: right;
		font-size: 1em;
		margin-top: -0.5em;
		padding: 0;

		.mw-echo-ui-notificationItemWidget-bundle & {
			font-size: 0.8em;
			margin-top: 0;
		}

		&.oo-ui-buttonWidget {
			margin-right: 0;
		}
	}

	&-initiallyUnseen {
		-webkit-animation-name: unseen-fadeout-to-read;
		animation-name: unseen-fadeout-to-read;
		-webkit-animation-duration: .5s;
		animation-duration: .5s;
		-webkit-animation-delay: 2s;
		animation-delay: 2s;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;

		&.mw-echo-ui-notificationItemWidget-unread {
			-webkit-animation-name: unseen-fadeout-to-unread;
			animation-name: unseen-fadeout-to-unread;
		}
	}
	&-unread {
		background-color: white;
	}

	&.oo-ui-optionWidget-selected,
	&.oo-ui-optionWidget-highlighted {
		background-color: #F9F9F9;
	}

	&-unread.oo-ui-optionWidget-highlighted {
		background-color: white;
	}

	// NOTE: The internal styling of the notifications is outside this file, because
	// it also affects the notifications in Special:Notifications
	// These styles are in modules/nojs/ext.echo.notifications.less
}

@-webkit-keyframes unseen-fadeout-to-unread {
	from {
		background-color: @notification-background-unseen;
	}
	to {
		background-color: @notification-background-unread;
	}
}

@keyframes unseen-fadeout-to-unread {
	from {
		background-color: @notification-background-unseen;
	}
	to {
		background-color: @notification-background-unread;
	}
}

@-webkit-keyframes unseen-fadeout-to-read {
	from {
		background-color: @notification-background-unseen;
	}
	to {
		background-color: @notification-background-read;
	}
}

@keyframes unseen-fadeout-to-read {
	from {
		background-color: @notification-background-unseen;
	}
	to {
		background-color: @notification-background-read;
	}
}