.notification {
	@include window;
	margin: 5px 5px 5px 12px;
	min-width: 25rem;

	background-color: $primary;
	color: $onPrimary;

	// low priority
	&.low {
		border: 1.5px solid $lavender;
	}

	// medium priority
	&.normal {
		border: 1.5px solid $blue;
	}

	// critical priority
	&.critical {
		border: 1.5px solid $red;
	}
}

.notifications widget:last-child .notification {
	margin-bottom: 15px;
}

.notification .icon {
	image {
		font-size: 5rem;
		margin: 0.5rem;
		min-height: 5rem;
		min-width: 5rem;
	}

	> box {
		border-radius: $rounding;
		margin: 0.5rem;
		min-height: 5rem;
		min-width: 5rem;
	}
}

.notification .actions .action-button {
	@include window;
	@include animated;
	padding: 4px 0;

	&:hover {
		background: $onSurfaceVariant;
	}
}

.notification .text {
	margin: 6px 4px;

	.title {
		margin: 4px 6px;
		color: $onPrimary;
		font-weight: 900;
	}

	.body {
		margin: 4px 6px;
		color: $onPrimary;
		font-weight: 600;
	}
}