@keyframes mb-n-toast-enter {
	0% {
		transform: translateY(-15%) scaleY(0);
	}

	50% {
		transform: translateY(-5%) scaleY(1.05);
	}

	75% {
		transform: translateY(0%) scaleY(1.025);
	}

	100% {
		transform: translateY(0%) scaleY(1);
	}
}

.mb-n-container {
	position: fixed;
	will-change: transform;
	transition: transform ease 0.5s;

	&.mb-n-fixed {
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: auto;
		width: 100%;
		height: 50px;
		transform: translateX(0%);
		z-index: 23700;
	}

	&.mb-n-float {
		top: 0px;
		left: 50%;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: 900px;
		height: 60px;
		padding-top: 10px;
		transform: translateX(-50%);
		z-index: 23800;
	}

	&.mb-n-toast {
		top: auto;
		left: 50%;
		right: auto;
		bottom: 0px;
		width: 100%;
		max-width: 500px;
		padding-bottom: 10px;
		height: 60px;
		transform: translateX(-50%);
		z-index: 23900;
	}

	.mb[mb-notification] {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		font-family: 'Montserrat', sans-serif;
		transition: transform 0.5s ease;

		&.mb-n-warn {
			background: linear-gradient(to right, #ff8a3f, #ff4444);
		}

		&.mb-n-info {
			background: #50b2ed;
		}

		&.mb-n-err {
			background: #ff4444;
		}

		&.mb-n-succ {
			background: #1eb75c;
		}

		.mb-n-inside-container {
			display: flex;
			max-width: 1000px;
			width: 100%;
			height: 100%;
			justify-content: space-around;
			align-content: center;

			@media screen and (max-width: 768px) {
				padding: 0 14px;
			}

			.mb-n-text {
				height: 100%;
				color: #fff;
				font-weight: 400;
				display: flex;
				font-size: 14px;
				align-items: center;
				max-width: 450px;
				width: auto;

				.mb-n-icon-container {
					height: 100%;
					color: #fff;
					margin-right: 10px;
					font-size: 20px;
					line-height: 50px;
				}
			}

			.mb-n-action-container {
				height: 100%;
				display: flex;
				align-items: center;
				max-width: 200px;

				.mb-n-action-button {
					width: 100%;
					padding: 5px 20px 5px 20px;
					background-color: transparent;
					border: 1px solid #fff;
					border-radius: 22.5px;
					font-size: 12px;
					font-weight: 400;
					text-align: center;
					color: #fff;
					cursor: pointer;
					transition: transform 200ms ease;

					&:hover {
						transform: scale(1.05);
					}
				}
			}
		}

		&.mb-n-fixed {
			transform: translate3d(0, -100%, 0);
			transition: transform 450ms ease;
			box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);

			&.mb-n-active {
				transform: translate3d(0, 0, 0);
			}
		}

		&.mb-n-float {
			border-radius: 5px;
			opacity: 0;
			transform: perspective(400px) translateY(-30%);
			will-change: opacity, transform;
			transition: opacity 500ms linear, transform 500ms ease;
			box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);

			&.mb-n-active {
				opacity: 1;
				transition: none;
				animation: mb-n-toast-enter 0.5s ease;
				transform: perspective(400px);
			}
		}

		&.mb-n-toast {
			top: auto;
			bottom: 10px;
			left: 50%;
			transform: translate3d(0, calc(100% + 10px), 0);
			width: 100%;
			max-width: 500px;
			border-radius: 3px;
			box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
			will-change: transform;
			transition: transform 0.25s ease;

			&.mb-n-active {
				transform: translate3d(0, 0, 0);
			}

			.mb-n-inside-container {
				padding-left: 15px;
				padding-right: 15px;

				.mb-n-action-container {
					width: 300px;

					.mb-n-action-button {
						border: none;
						padding: 0px;
						width: 100%;
						text-align: right;
						text-decoration: underline;
					}
				}

				.mb-n-text {
					font-size: 14px;

					.mb-n-icon-container {
						display: none;
					}
				}
			}
		}
	}
}