@import "./src/scss/_modules/variables";

.toast {
	background-color: $primary-500;
	background-image: none !important;

	&:before {
		content: "\f05a";
		position: absolute;
		display: flex;
		font-family: 'Font Awesome 5 Pro';
		font-size: 1.8rem;
		left: 1rem;
		top: 0;
		bottom: 0;
		align-items: center;
	}
}

.toast-success {
	background-color: $success-600;
	&:before {
		content: "\f2f7";
	}
}

.toast-error {
	background-color: $danger-500;
	&:before {
		content: "\f2f0";
	}
}

.toast-info {
	background-color: $info-500;
	&:before {
		content: "\f05a";
	}
}

.toast-warning {
	background-color: $warning-700;
	& > div,
	.toast-close-button {
		color: $black;
	}
	&:before {
		content: "\f071";
		color: $black;
	}
}

#toast-container > .toast  {
	padding: 1rem 1rem 1rem 3.5rem;
	border-radius: $border-radius;
	background-image: none !important;
	width: 22rem;
	opacity: 0.9;

	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

	&:hover {
		box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
	}

}

.toast-close-button {
	top: -0.7em;
}


@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container > .toast {
    width: 18rem;
  }
  #toast-container .toast-close-button {
    top: -0.7em;
  }
}