/*
Currently in use at:
- NDN
		perl/Ndn/Dhwebpanel/Billing/Contact.pm.tp
		perl/Ndn/Dhwebpanel/Domain/Secure.pm.tp
- Signup
		Numerous pages
*/

//Toaster Alerts
.Toaster-container {
	position: absolute;
	top:4.5em;
	right:0;
	overflow: hidden;
	padding:1em;
}

.Toaster {
	position: relative;
	word-wrap: break-word;
	background: $c-g200;
	color: $c-g500;
	// border: $border-size-1 $c-g200 solid;
	border-radius: $border-radius;
	margin: 0 0 1rem 0;
	animation: Toaster 5s ease-in-out both;
	transition: transform 0.1s ease-in-out;
    display: flex;
    flex-direction: row;
	&:before{
		content: '';
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		height: 0.5rem;
		width: 0.5rem;
		background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2031.3%2031.3%22%3E%3Cpath%20d%3D%22M8.4%2015.7l-7-7.1c-2-2-1.9-5.2.3-7.2%202.1-1.9%205.5-1.8%207.5.2l6.5%206.6%206.5-6.6c2-2%205.4-2.2%207.5-.2%202.1%201.9%202.3%205.1.3%207.2l-7%207.1%207%207.1c2%202%201.9%205.2-.3%207.2-2.1%201.9-5.5%201.8-7.5-.3l-6.5-6.6-6.5%206.6c-2%202-5.4%202.2-7.5.3-2.1-1.9-2.3-5.1-.3-7.2l7-7.1z%22%20fill%3D%22#{$c-g300}%22%20%2F%3E%3C%2Fsvg%3E');
	}

	&:hover, &:active {
		transform: scale(1.02);
		box-shadow:0 0 10px rgba($c-g500,0.3);
		cursor: pointer;
	}

	p {margin:0;}

	.Toaster__type {
		background: $c-b300;
		border-color: $c-b300;
		border-radius: $border-radius 0 0 $border-radius !important;
		width: 7rem;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		svg {
			width:1.5rem;
			height:1.5rem;
			fill: $c-w100;
		}
	}
}

.Toaster--persistent {
	animation: ToasterPersistent .5s ease-in-out backwards;
}

.Toaster--negative {
	.Toaster__type {
		background: $c-r300;
		border-color: $c-r300;
		svg * { fill: $c-r100 }
	}
}

.Toaster--positive {
	.Toaster__type {
		background: $c-t300;
		border-color: $c-t300;
		svg * { fill: $c-t100 }
	}
}

.Toaster--warning{
	.Toaster__type{
		background-color: $c-y300;
		border-color: $c-y300;
		svg * { fill: $c-w100; }
	}
}

.Toaster__heading {
	padding: 2rem;
	flex: 1 1 auto;
	text-transform: uppercase;
	font: $body;
	@include fontsize($t-1);
	line-height: 1;
	font-weight: $t-bold;

	span {
		display: block;
		text-transform: initial;
		@include fontsize($t-1);
		font-weight: $t-regular;
		margin-top: 1rem;
		line-height: 1;
	}

}


.Toaster__close{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem 2rem 1rem 1rem;
	color: $c-g400;
	background-color: transparent;
	font-size: 2rem;
	&:hover{
		text-decoration: none;
	}

}


@for $i from 1 to 10 {
	.Toaster-container .Toaster:nth-child(#{$i}) { animation-delay: $i * 0.3s; }
}

.Toaster-container .Toaster.Toaster--is-closing{
	animation: CloseToaster .3s ease-in-out forwards;
	animation-delay: 0s;
}

.Toaster.Toaster--killed {
	display: none;
}

@keyframes CloseToaster {
	0% {
		opacity: 1;
		transform: translateX(0);
		margin-bottom: 0.5em;
		height:100%;
	}

	100% {
		opacity: 0;
		transform: translateX(100%);
		margin-bottom: 0.5em;
		height:0;
	}
}

@keyframes ToasterPersistent {
	0% {
	opacity: 0;
	transform: scale(.98) translateX(100%);
	}

	100% {
	opacity: 1;
	transform: scale(1) translateX(0);
	}
}

@keyframes Toaster {
	0% {
	opacity: 0;
	transform: scale(.98) translateX(100%);
	margin-bottom: 0.5em;
	height: 100%;
	}

	10% {
	opacity: 1;
	transform: scale(1) translateX(0);
	margin-bottom: 0.5em;
	height: 100%;
	}

	90% {
	opacity: 1;
	transform: scale(1) translateX(0);
	margin-bottom: 0.5em;
	height: 100%;
	}

	99% {
	opacity: 1;
	transform: scale(.98) translateX(100%);
	margin-bottom: 0.5em;
	height: 100%;
	}

	100% {
	opacity: 0;
	transform: scale(0) translateX(100%);
	margin-bottom: 0;
	height: 0;
	visibility: hidden;
	}
}