.notifications-button {
	position: relative;
	float: right;
	width: 16px;
	height: 16px;
	display: block;
	border-radius: 50%;
	text-align: center;
	padding: 10px;
	opacity: .6;

	&:hover,
	&:focus {
		opacity: 1 !important;
	}

	&.hasNotifications {
		opacity: 1 !important;

		&:hover,
		&:focus {
			opacity: .6 !important;
		}
	}

	&,
	img {
		cursor: pointer;
	}
}

.notification-container {
	display: none;
	right: 13px;
	width: 350px;
	max-width: 90%;

	.notification-wrapper {
		display: flex;
		flex-direction: column;
	}

	.emptycontent {
		padding: 50px 0;
		margin: 0;

		@include icon-black-white('notifications-dark', 'notifications', 1);
	}

	.dismiss-all {
		display: flex;
		justify-content: center;
		color: var(--color-text-maxcontrast);
		border-top: 1px solid var(--color-border);
		padding: 10px;

		&:hover,
		.icon-close {
			opacity: 1;
			cursor: pointer;
		}

		.icon-close {
			opacity: .5;
			margin-right: 5px;
		}
	}

	/* Menu arrow */
	&:after {
		right: 101px;
	}
}


.notification {
	padding-bottom: 12px;

	&:not(:last-child) {
		border-bottom: 1px solid var(--color-border);
	}

	.notification-heading {
		display: flex;

		.notification-time {
			color: var(--color-text-maxcontrast);
			margin: 13px 0 13px auto;
		}

		.notification-delete {
			display: flex;
			color: var(--color-text-maxcontrast);
			padding: 14px;

			&:hover,
			.icon-close {
				opacity: 1;
				cursor: pointer;
			}

			.icon-close {
				opacity: .5;
			}
		}
	}


	.notification-subject,
	.notification-message,
	.notification-full-message,
	.notification-actions {
		margin: 0 12px 12px;
	}

	.notification-subject {
		display: flex;
		align-items: center;

		& > .image {
			align-self: flex-start;
		}

		& > span.subject,
		& > a > span.subject,
		& > .rich-text--wrapper,
		& > a > .rich-text--wrapper {
			padding-left: 10px;
			word-wrap: anywhere;
		}
	}

	.notification-message,
	.notification-full-message {
		padding-left: 42px; // 32px icon + 10px title padding
		color: var(--color-text-maxcontrast);

		& > .collapsed {
			overflow: hidden;
			max-height: 70px
		}

		& > .notification-overflow {
			box-shadow: 0 0 20px 20px var(--color-main-background);
			position: relative;
		}
	}

	img.notification-icon {
		width: 32px;
		height: 32px;
		display: flex;

		body.theme--dark & {
			filter: invert(1);
		}
	}

	strong {
		font-weight: bold;
		opacity: 1;
	}

	.notification-actions {
		overflow: hidden;

		.action-button.primary {
			color: var(--color-primary-text);
		}

		&:first-child {
			margin-left: auto;
		}
	}
}