/* Aviso breve: confirmacion pasajera, centrada abajo. */

/*
 * Mismo arreglo que el resto de los elementos fijos del paquete: sin esto,
 * un bloque sin "align:full" queda encogido a la columna de contenido con
 * margenes automaticos. Ver la nota larga en CategoriesPanel/style.css.
 */
.ace-toast {
	align-items: center;
	background-color: var(--wp--preset--color--contrast, #21201d);
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	box-shadow: 0 0.375rem 1.125rem rgb(0 0 0 / 25%);
	color: var(--wp--preset--color--contrast-contrast, #fff);
	display: flex;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	gap: 0.5rem;
	inset-block-end: 1.5rem !important;
	inset-inline-start: 50% !important;
	margin: 0 !important;
	max-width: none !important;
	opacity: 0;
	padding-block: 0.75rem;
	padding-inline: 1.25rem;
	pointer-events: none;
	position: fixed !important;
	transform: translate(-50%, 0.5rem);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
	width: auto !important;
	z-index: var(--wp--custom--layer--modal, 300);
}

.ace-toast.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.ace-toast:empty {
	display: none;
}

.ace-toast__icon {
	block-size: 1.125rem;
	color: var(--wp--preset--color--success, #3a8a5d);
	flex-shrink: 0;
	inline-size: 1.125rem;
}

/*
 * Cuando la barra inferior movil esta visible, el aviso se corre arriba de
 * ella. Mismo contrato de FloatingActions/style.css.
 */
body:has(.ace-mobile-nav.is-show-always) .ace-toast {
	inset-block-end: calc(var(--wp--custom--bar--bottom-nav, 3.75rem) + env(safe-area-inset-bottom, 0) + 1rem) !important;
}

@media (max-width: 64rem) {
	body:has(.ace-mobile-nav.is-show-1024) .ace-toast {
		inset-block-end: calc(var(--wp--custom--bar--bottom-nav, 3.75rem) + env(safe-area-inset-bottom, 0) + 1rem) !important;
	}
}

@media (max-width: 48rem) {
	body:has(.ace-mobile-nav.is-show-768) .ace-toast {
		inset-block-end: calc(var(--wp--custom--bar--bottom-nav, 3.75rem) + env(safe-area-inset-bottom, 0) + 1rem) !important;
	}
}

@media (max-width: 26.875rem) {
	.ace-toast {
		inline-size: calc(100vw - 2rem) !important;
		max-inline-size: 26rem;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ace-toast {
		transition-duration: 0.01ms;
	}
}

/* El componente debe seguir visible dentro de los dos editores. */
.block-editor-block-list__block .ace-toast,
.elementor-editor-active .ace-toast {
	inset-block-end: auto !important;
	inset-inline-start: auto !important;
	opacity: 1;
	position: relative !important;
	transform: none;
}

.block-editor-block-list__block .ace-toast:empty::after,
.elementor-editor-active .ace-toast:empty::after {
	color: var(--wp--preset--color--contrast-muted, #9a9992);
	content: "Aviso breve (vacio hasta que una accion lo dispare)";
	display: block;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	padding-block: 0.75rem;
	padding-inline: 1.25rem;
}

.block-editor-block-list__block .ace-toast:empty,
.elementor-editor-active .ace-toast:empty {
	display: block;
}