/* scss/Molecules/_Notifications.scss */


/* Banner Notification Styles */

.banner-wrap {
	width: 100%;
	display: flex;
	padding: 1em;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 1em;
	box-sizing: border-box;


		&--primary {
			background-color: $primary-color;
			color: #fff;
		}


		&--secondary {
			background-color: $secondary-color;
			color: #fff;
		}



		&--tertiary {
			background-color: $tertiary-color;
			color: #fff;

		}

		&--tertiary-1 {
			background-color: $tertiary-color-1;

		}

		&--tertiary-2{
			background-color: $tertiary-color-2;

		}

		&--tertiary-3 {
			background-color: $tertiary-color-3;

		}

		&--error {
			background-color: $error-color;
			color: #fff;

		}

		&--warning {
			background-color: $warning-color;
			color: #fff;

		}

		/* Gradients */

		&--primary-gradient {
			@include linear-gradient(to right, $primary-color 0%, $tertiary-color 50%, $secondary-color 100%);

		}

}


.banner, .banner-wrap {
	width: 100%;
	display: flex;
	padding: 1em;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 1em;
	box-sizing: border-box;
}


/* Toaster Notification Styles */


.toaster-wrap, .toaster {
	display: flex;
	padding: 1em;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 1em;
	@include borderRadius(4px);
	@include box-shadow();
	width: 100%;
	cursor: pointer;
	box-sizing: border-box;


	&:first-of-type {
		margin-left: 0;
	}

}


.toaster-wrap {
	transition: all 0.25s ease-in-out;
	cursor: pointer;
	box-sizing: border-box;


		&--primary {
			background-color: rgba($primary-color, 0.9);
			color: #fff;
			transition: all 0.25s ease-in-out;

			&:hover {
				background-color: rgba($primary-color, 1);
				transition: all 0.25s ease-in-out;
			}
		}


		&--secondary {
			background-color:rgba($secondary-color, .9);
			color: #fff;
			transition: all 0.25s ease-in-out;

			&:hover {
				background-color: rgba($secondary-color, 1);
				transition: all 0.25s ease-in-out;
			}
		}



		&--tertiary {
			background-color: rgba($tertiary-color, .9);
			color: #fff;
			transition: all 0.25s ease-in-out;

			&:hover {
				background-color: rgba($tertiary-color, 1);
				transition: all 0.25s ease-in-out;
			}
		}

		&--tertiary-1 {
			background-color: rgba($tertiary-color-1, .9);
			transition: all 0.25s ease-in-out;


			&:hover {
				background-color: rgba($tertiary-color-1, 1);
				transition: all 0.25s ease-in-out;
			}
		}

		&--tertiary-2{
			background-color: rgba($tertiary-color-2, 0.9);
			transition: all 0.25s ease-in-out;

			&:hover {
				background-color: rgba($tertiary-color-2, 1);
				transition: all 0.25s ease-in-out;
			}

		}

		&--tertiary-3 {
			background-color: rgba($tertiary-color-3, 0.9);
			transition: all 0.25s ease-in-out;

			&:hover {
				background-color: rgba($tertiary-color-3, 1);
				transition: all 0.25s ease-in-out;
			}

		}


		&--error {
			background-color: $error-color;
			transition: all 0.25s ease-in-out;

			&:hover {
				background-color: rgba($error-color, 1);
				transition: all 0.25s ease-in-out;
			}

		}


		&--warning {
			background-color: $warning-color;
			transition: all 0.25s ease-in-out;

			&:hover {
				background-color: rgba($warning-color, 1);
				transition: all 0.25s ease-in-out;
			}

		}



}

	.toaster-wrap {
	  @include borderRadius(4px);
	  @include box-shadow();
	  box-sizing: border-box;



			&__content {
				color: #fff;



				.content__title {
					font-weight: bold;
					text-transform: uppercase;
					margin: 0;
					margin-bottom: 0.25em;
					color: #fff;
				}

				.content__message {
					margin: 0;
					font-size: 0.9rem;
					color: #fff;
				}

			}


	}



.banner-wrap__dismiss, .banner-wrap__dismiss i,
.toaster-wrap__dismiss, .toaster-wrap__dismiss i {
			color: #fff;
			opacity: 0.7;
			transition: all 0.25s ease-in-out;
			cursor: pointer;

			&:hover {
				transition: all 0.25s ease-in-out;
				opacity: 1;

			}
		}




/* Demo Display Styles for Toaster Wrap */

section.grid.grid__three-column.demo {
	grid-gap: 1%;
}

.banner-wrap {
	box-sizing: border-box;

	&--footer {
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		margin: 0;
		left: 0;
		background: $primary-color;
		color: #fff;
		z-index: 9999;
		padding: 0;
		box-shadow: 0 0 3px 1px rgba(0,0,0,0.1);

		> .banner-wrap__content {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			width: 100%;

			> i.icon {
				font-size: 1.5rem;
				margin-right: .5em;
			}

			> a {
				color: #fff;
				text-decoration: none;
				text-transform: uppercase;
				width: 100%;
				padding: 1em;
				text-align: center;
				margin: 0 auto;
				transition: all 0.25s ease-in-out;

				&:hover {
					background: darken($primary-color, 2%);
					transition: all 0.25s ease-in-out;
				}

			}
		}
	}
}