@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: 2.5em;
			width: 2.5em;
		}

		position: absolute;
	}

	&-content {
		display: inline-block;
		// The icon is 2.5em and has a 1em right margin
		padding-left: 2.5em + 1em;
		box-sizing: border-box;
		width: 100%;

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

			// Only for bundled items
			.mw-echo-ui-notificationItemWidget-bundle & {
				float: left;
				display: inline-block;

				&-header {
					width: 18em;
				}
			}
		}

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

			.mw-echo-ui-notificationItemWidget-bundle & {
				display: inline;
			}

			&-button .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 {
				.mw-echo-ui-notificationItemWidget-bundle & {
					float: right;
					margin-right: 0.5em;
				}

				.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;
				.mw-echo-ui-notificationItemWidget-bundle & {
					margin-top: 0.2em;
				}
			}

		}
	}

	&-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;
	}
}