/*
 * Gabarit CSS : Toasts (Notifications)
 * 
 * Directive 3 & 4 : Esthétique soignée, animations fluides
 * et support des 4 états (Info, Succès, Alerte, Erreur).
 */

.saasbuilder-toasts-container {
	position: fixed;
	bottom: var(--spacing-lg);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10500; /* Toujours au-dessus du BottomSheet (10000) */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
	/* Empêche le conteneur invisible de bloquer les clics sur la page */
	pointer-events: none;
	width: 100%;
	max-width: 380px;
}

/* Adaptation Mobile Native */
@media (max-width: 768px) {
	.saasbuilder-toasts-container {
		bottom: var(--spacing-md);
		width: calc(100% - calc(var(--spacing-md) * 2));
	}
}

/* Le Toast en lui-même : pastille colorée pleine, sans bordure */
.saasbuilder-toast {
	width: auto;
	min-width: 250px;
	max-width: 100%;
	border-radius: 30px;
	padding: 10px 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	/* Restaure les clics sur l'élément lui-même */
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);

	background-color: var(--color-text);
	color: var(--color-bg);

	/* Animation d'entrée : Pop-up depuis le bas */
	transform: translateY(20px) scale(0.95);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.saasbuilder-toast.is-visible {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.saasbuilder-toast.is-closing {
	transform: translateY(20px) scale(0.95);
	opacity: 0;
}

/* Badge rond contenant le glyphe coloré */
.saasbuilder-toast-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.saasbuilder-toast-icon svg {
	width: 14px;
	height: 14px;
}

/* Colorisation des icônes SVG selon l'état */
.saasbuilder-toast--info .saasbuilder-toast-icon    { background-color: var(--color-info); color: var(--color-text); }
.saasbuilder-toast--success .saasbuilder-toast-icon { background-color: var(--color-success); color: var(--color-text); }
.saasbuilder-toast--warning .saasbuilder-toast-icon { background-color: var(--color-warning); color: var(--color-text); }
.saasbuilder-toast--error .saasbuilder-toast-icon   { background-color: var(--color-danger); color: var(--color-text); }

.saasbuilder-toast-content {
	flex-grow: 1;
	min-width: 0;
}

.saasbuilder-toast-title {
	font-weight: 500;
	font-size: 0.9375rem;
	margin: 0;
	color: var(--color-bg);
}

.saasbuilder-toast-title:empty {
	display: none;
}

.saasbuilder-toast-message {
	font-size: 0.9375rem;
	color: var(--color-bg);
	margin: 0;
	line-height: 1.4;
}

.saasbuilder-toast-title:not(:empty) + .saasbuilder-toast-message {
	font-size: 0.8125rem;
	color: var(--color-bg);
	opacity: 0.8;
	margin-top: 2px;
}

.saasbuilder-toast-close {
	background: none;
	border: none;
	color: var(--color-bg);
	cursor: pointer;
	padding: 4px 0 4px 12px;
	opacity: 0.6;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
	border-left: 1px solid color-mix(in srgb, var(--color-bg) 20%, transparent);
	margin-left: 8px;
}

.saasbuilder-toast-close:hover {
	opacity: 1;
}