/*------------------------------------------------------------------------------*/
/* Notifications
/*------------------------------------------------------------------------------*/

.Notification {
	--notification-bg: var(--color-notification-bg);
	background-color: var(--notification-bg);
	border-radius: var(--border-radius);
	color: var(--color-text-dark);
	margin: 0 0 2rem 0;
	padding: 1rem 1.5rem;
	position: relative;
	transition-duration: var(--transition-fast);
}

.Notification + .Notification {
	margin-top: -1.5rem;
}

.Notification.Success {
	--notification-bg: var(--color-notification-success-bg);
}

.Notification.Error {
	--notification-bg: var(--color-notification-error-bg);
}

.Notification > :last-child {
	margin-bottom: 0;
}

/*------------------------------------------------------------------------------*/
/* Notification Center
/*------------------------------------------------------------------------------*/

.NotificationCenter {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	left: 0;
	margin-inline: auto;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 2rem;
	width: 480px;
	z-index: 10000;
}

.NotificationCenter .Notification {
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
	margin: 0;
	width: 100%;
}

/*------------------------------------------------------------------------------*/
/* Notification Center Animations
/*------------------------------------------------------------------------------*/

@media screen and (min-width: 601px) {
	.NotificationCenter .Notification {
		animation: fadeInDown var(--transition-slow) ease-in-out forwards;
		position: absolute;
	}

	.NotificationCenter .Notification:nth-child(2) {
		animation: stack-level-1 calc(var(--transition-slow) * 1.5) ease-in-out forwards;
		z-index: -1;
	}

	.NotificationCenter .Notification:nth-child(3) {
		animation: stack-level-2 var(--transition-slow) ease-in-out forwards;
		z-index: -2;
	}

	.NotificationCenter .Notification.AnimOut {
		animation: fadeOutUp var(--transition-slow) ease-in-out forwards;
		z-index: -3;
	}

	@keyframes stack-level-1 {
		0% {
			transform: scale(1) translate3d(0, 0, 0);
		}
		50% {
			transform: scale(1) translate3d(0, 100%, 0);
		}
		100% {
			opacity: .75;
			transform: scale(.95) translate3d(0, 10%, 0);
		}
	}
	
	@keyframes stack-level-2 {
		to {
			opacity: 0;
			transform: scale(.90) translate3d(0, 20%, 0);
		}
	}
}

@media screen and (max-width: 600px) {
	.NotificationCenter {
		bottom: 2rem;
		gap: 1rem;
		left: 1rem;
		margin: 0;
		right: 1rem;
		top: auto;
		width: auto;
	}

	.NotificationCenter .Notification {
		animation: fadeInUp var(--transition-slow) ease-in-out forwards;
		position: absolute;
	}

	.NotificationCenter .Notification:nth-child(2) {
		animation: stack-level-1 calc(var(--transition-slow) * 1.5) ease-in-out forwards;
		z-index: -1;
	}

	.NotificationCenter .Notification:nth-child(3) {
		animation: stack-level-2 var(--transition-slow) ease-in-out forwards;
		z-index: -2;
	}

	.NotificationCenter .Notification.AnimOut {
		animation: fadeOutDown var(--transition-slow) ease-in-out forwards;
		z-index: -3;
	}

	@keyframes stack-level-1 {
		to {
			opacity: .75;
			transform: scale(.95) translate3d(0, -10%, 0);
		}
	}
	
	@keyframes stack-level-2 {
		to {
			opacity: 0;
			transform: scale(.90) translate3d(0, -15%, 0);
		}
	}
}