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

	.svg {
		width: 20px;
		height: 20px;
	}

	&: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;
		margin-bottom: 66px;
		max-height: calc(100vh - 50px * 4 - 44px) !important;
	}

	.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;
		width: calc(100% - 10px * 2);
		position: absolute;
		bottom: 0;
		background-color: var(--color-main-background);

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

		.button {
			position: relative;
			width: fit-content;
			overflow: hidden;
			border: none;
			font-size: var(--default-font-size);
			font-weight: bold;
			min-height: 44px;
			min-width: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			border-radius: 44px / 2;
			transition: background-color 0.1s linear !important;
			transition: border 0.1s linear;
			color: var(--color-main-text);
			background-color: var(--color-background-dark);
			line-height: normal;
			vertical-align: baseline;
			padding: 8px 16px;

			& * {
				cursor: pointer;
			}

			&:hover {
				background-color: var(--color-primary-light-hover);
			}

			// Back to the default color for this button when active
			// TODO: add ripple effect
			&:active {
				background-color: var(--color-primary-element-lighter);
			}

			&:not(.primary) {
				box-shadow: 0 0 0 2px var(--color-border-dark);

				&:hover {
					color: var(--color-main-text);
					background-color: var(--color-background-dark);
					box-shadow: 0 0 0 2px var(--color-primary-element);
				}

				&:active {
					box-shadow: 0 0 0 2px var(--color-main-text);
				}

				&--tabbed {
					box-shadow: 0 0 0 2px var(--color-main-text);
					background-color: var(--color-primary-light-hover);

					&.button-vue--vue-primary {
						background-color: var(--color-primary-hover);
					}

					&.button-vue--vue-secondary {
						box-shadow: 0 0 0 2px var(--color-main-text);
					}
				}
			}

			&.primary {
				box-shadow: none;
				background-color: var(--color-primary-element);
				color: var(--color-primary-text);

				&:hover {
					background-color: var(--color-primary-element-hover);
				}

				&:active {
					background-color: var(--color-primary-element);
				}

				&.button--tabbed {
					background-color: var(--color-primary-hover);
				}
			}
		}

		.button-vue {
			line-height: normal;
			margin: 2px 8px;
		}

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