:root{
--form-toasty-radius: .25rem;
--form-toasty-offset: 16px;
--form-toasty-gap: .5rem;
--form-toasty-shadow: 0 10px 30px rgba(0,0,0,.15);
--form-toasty-z: 99999;
--form-toasty-toast-max: 640px;  --form-toasty-success-bg: var(--success-l-6);
--form-toasty-success-fg: var(--success-l-1);
--form-toasty-success-bd: var(--success);
--form-toasty-error-bg: var(--error-l-6);
--form-toasty-error-fg: var(--error-l-1);
--form-toasty-error-bd: var(--error);
} #brx-toast-root{
position: fixed;
top: var(--form-toasty-offset);
left: 50%;
transform: translateX(-50%);
display: grid;
gap: var(--form-toasty-gap);
z-index: var(--form-toasty-z);
pointer-events: none; } .brx-toast{
pointer-events: auto;
inline-size: min(var(--form-toasty-toast-max), 92vw);
background: #fff;
color: var(--text-body);
font-size: var(--text-m);
box-shadow: var(--form-toasty-shadow);
border-radius: var(--form-toasty-radius);
border-left: 4px solid transparent;
padding: .75rem 2.25rem .75rem 1rem;
display: block;
transform: translateY(-8px);
opacity: 0;
transition: transform .2s ease, opacity .2s ease, border-color .2s ease, background-color .2s ease;
overflow-wrap: anywhere;
white-space: normal;
}
.brx-toast.in{ opacity: 1; transform: translateY(0); } .brx-toast.is-success{
background: var(--form-toasty-success-bg);
color: var(--form-toasty-success-fg);
border-left-color: var(--form-toasty-success-bd);
}
.brx-toast.is-error{
background: var(--form-toasty-error-bg);
color: var(--form-toasty-error-fg);
border-left-color: var(--form-toasty-error-bd);
} .brx-toast a{ color: inherit; text-decoration: underline; } .brx-toast__close{
position: absolute; top: 6px; right: 8px;
border: 0; background: transparent; cursor: pointer; opacity: .7;
}
.brx-toast__close:hover{ opacity: 1; }
.brxe-form .message{ display:none !important; } @media (prefers-reduced-motion: reduce){ .brx-toast, .brx-toast.in{ transition:none; } }