/*--------------------------------------------------*/
/*	ROUNDED THEME
/*--------------------------------------------------*/


/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.toasts {
	z-index: 9999;
	position: fixed;
	bottom: 0;

	width: 100%;
	min-width: 500px;

	padding: 15px;
}

.toasts .toast {
	display: flex;

	align-items: center;

	width: 100%;
	min-height: 64px;

	padding: 4px;

	border-radius: 10px;

	background: #252525;
	color: #FFFFFF;

	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	    -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	     -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.toasts .toast:nth-child(n+2) {
	margin-top: 10px;
}

.toasts .toast .thumb {
	max-width: 56px;
	margin-right: 4px;
}

.toasts .toast .thumb img {
	object-fit: cover;
}

.toasts .toast .msg,
.toasts .toast button {
	padding: 6px;
}

.toasts .toast .msg {
	flex: 1;
}

.toasts .toast .msg p {
	word-wrap: break-word;
}

.toasts .toast .msg a {
	color: #329CF9;
	text-decoration: underline;
}

.toasts .toast .msg a:hover,
.toasts .toast .msg a:focus {
	color: #1E88E5;
}

.toasts .toast button {
	cursor: pointer;

	font-weight: bold;
	font-size: 115%;
	color: var(--color-blue);
}

.toasts .toast button:hover,
.toasts .toast button:focus {
	color: var(--color-blue-light);
}

@media screen and (max-width: 500px) {
	.toasts {
		width: 100%;
	}
}

/*--------------------------------------------------*/
/*	TYPES
/*--------------------------------------------------*/

.toasts .toast {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}

.toasts .toast[level="warning"] {
	border-left: 10px solid var(--color-yellow);
}

.toasts .toast[level="alert"] {
	border-left: 10px solid var(--color-orange);
}

.toasts .toast[level="error"] {
	border-left: 10px solid var(--color-red);
}

.toasts .toast[level="success"] {
	border-left: 10px solid var(--color-green);
}

.toasts .toast[level="info"] {
	border-left: 10px solid var(--color-blue);
}

/*--------------------------------------------------*/
/*	STATES
/*--------------------------------------------------*/

.toasts .toast {
	transition: opacity 0.3s linear;
	opacity: 1;
}

.toasts .toast[visible="false"] {
	pointer-events: none;
	opacity: 0;
}