/*
	Dos formas de mostrar el toast:
	1- Añadiendo manualmente el div:
		<div class="toast success"><i></i>Texto</div>
	2- Llamando al método de 'showToast(text, type = 'info', withX = true)' JS(Aconsejada):
		showToast('Texto');
		showToast('Texto', 'success');
		showToast('Texto', 'warning', false);

	Los toast pueden ser:
		- success: verde
		- error: rojo
		- warning: naranja
		- info: azul (por defecto)


	- Los toast se sobreponen uno sobre otro
	- Al hacer click sobre el toast se cerrará el toast clickado.
	- Al hacer click sobre la X se cerrarán todos los toast.
	- La X se muestra solo si se añade <i></i>
*/

.toast {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 300px;
	padding: 15px;
	color: #fff;
	font-size: 14px;
	border-radius: 6px;
	border: none;
	box-shadow: 0 0 10px 0 var(--grey);
	background: var(--blue);
	opacity: 0.8;
	cursor: pointer;
	z-index: 999990;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
.toast:hover {
	opacity: 1;
}

.toast.success {
	background: var(--green);
}
.toast.error {
	background: var(--red);
}
.toast.warning {
	background: var(--yellow);
}
.toast.info {
	background: var(--blue);
}

.toast i {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 20px;
	height: 20px;
	padding: 3px;
	background: var(--grey);
	color: #fff;
	text-align: center;
	font-style: normal;
	border-radius: 6px;
	border: none;
	z-index: 999991;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
.toast i:before {
	content: '\2715';
}
.toast i:hover {
	top: -7px;
	right: -7px;
	padding: 5px;
	z-index: 999990;
}