@sixbell-telco/sdk/assets/styles/toast.css

A collection of reusable components designed for use in Sixbell Telco Angular projects

/* DEPRECATED: Legacy toast system styles
 * --------------------------------------------------
 * Retained for backward compatibility while migrating
 * to ngx-sonner based toasts. Do not modify stacking
 * logic; new styling lives inside Sonner component via
 * Tailwind utility classes. Remove this file only when
 * all consumers have switched to the new API.
 */
@use 'tailwindcss/base';

.toast-container > st-toast-message:nth-child(n + 4) > .toast-message {
	bottom: 1.6rem;
	scale: 0.9;
	z-index: 11;
	opacity: 0;
	visibility: hidden;
}

.toast-container > * > .toast-message {
	position: absolute;
	right: 0;
}

.toast-container > *:nth-child(1) > .toast-message {
	bottom: 0;
	scale: 1;
	z-index: 13;
}

.toast-container > *:nth-child(2) > .toast-message {
	bottom: 0.8rem;
	scale: 0.95;
	z-index: 12;
}

.toast-container > *:nth-child(3) > .toast-message {
	bottom: 1.6rem;
	scale: 0.9;
	z-index: 11;
}

.toast-container[aria-expanded='true'] > *:nth-child(1) > .toast-message {
	bottom: 0;
	position: absolute;
	scale: 1;
	z-index: 13;
	margin: 0;
}

.toast-container[aria-expanded='true'] > *:nth-child(2) > .toast-message {
	bottom: 6rem;
	position: absolute;
	scale: 1;
	z-index: 13;
	margin: 0;
}

.toast-container[aria-expanded='true'] > *:nth-child(3) > .toast-message {
	bottom: 12rem;
	position: absolute;
	scale: 1;
	margin: 0;
}