.fnv-notify-sr,
.fnv-toast__sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fnv-toasts {
--fnv-toast-ink: var(--fnv-ink, CanvasText);
--fnv-toast-paper: var(--fnv-surface, Canvas);
--fnv-toast-dim: color-mix(in srgb, var(--fnv-toast-paper) 72%, var(--fnv-toast-ink));
position: fixed;
inset: auto 0 calc(24px + env(safe-area-inset-bottom, 0px)) 0;
z-index: var(--z-toast);
display: none;
flex-direction: column;
gap: 8px;
width: min(460px, calc(100% - 24px));
height: auto;
margin: 0 auto;
padding: 0;
border: 0;
overflow: visible;
background: transparent;
color: var(--fnv-toast-paper);
pointer-events: none;
}
.fnv-toasts:not([popover]):not(:empty),
.fnv-toasts:is(:popover-open) { display: flex; }
.fnv-toast {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
padding-block: 12px 14px;
padding-inline: 14px 4px;
background: var(--fnv-toast-ink);
color: var(--fnv-toast-paper);
font-family: var(--fnv-font-body, inherit);
font-size: .9375rem;
line-height: 1.75;
pointer-events: auto;
opacity: 1;
transform: none;
transition: opacity .18s ease-out, transform .18s ease-out;
}
@starting-style {
.fnv-toast { opacity: 0; transform: translateY(8px); }
}
.fnv-toast.is-leaving { opacity: 0; transform: translateY(4px); }
.fnv-toast__ic {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-top: 1px;
border: 2px solid var(--fnv-toast-paper);
background: transparent;
color: var(--fnv-toast-paper);
font-size: 1.0625rem;
line-height: 1;
}
.fnv-toast[data-status="success"] .fnv-toast__ic,
.fnv-toast[data-status="error"] .fnv-toast__ic {
background: var(--fnv-toast-paper);
color: var(--fnv-toast-ink);
}
.fnv-toast__b { min-width: 0; padding-top: 3px; }
.fnv-toast__m { font-weight: 700; overflow-wrap: anywhere; }
.fnv-toast__l {
margin: 4px 0 0;
padding-inline-start: 18px;
font-size: .875rem;
font-weight: 500;
line-height: 1.8;
color: var(--fnv-toast-dim);
}
.fnv-toast__a {
display: inline-flex;
align-items: center;
min-height: 32px;
margin-top: 2px;
padding: 0;
border: 0;
background: none;
color: var(--fnv-toast-paper);
font: inherit;
font-size: .875rem;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.fnv-toast__x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-block: -9px;
padding: 0;
border: 0;
background: none;
color: var(--fnv-toast-dim);
font-size: 1.125rem;
cursor: pointer;
}
.fnv-toast__x:hover { color: var(--fnv-toast-paper); }
.fnv-toast__x:focus-visible,
.fnv-toast__a:focus-visible {
outline: 2px solid var(--fnv-toast-paper);
outline-offset: -2px;
color: var(--fnv-toast-paper);
}
.fnv-toast__bar {
position: absolute;
inset-inline: 0;
bottom: 0;
height: 2px;
background: var(--fnv-toast-dim);
transform-origin: right;
animation: fnv-toast-left var(--fnv-toast-ms, 5s) linear forwards;
}
.fnv-toast__bar:dir(ltr) { transform-origin: left; }
.fnv-toast.is-paused .fnv-toast__bar { animation-play-state: paused; }
@keyframes fnv-toast-left {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (max-width: 767.98px) {
.fnv-toasts {
inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
width: calc(100% - 24px);
}
}
@media (prefers-reduced-motion: reduce) {
.fnv-toast { transition: opacity .1s linear; }
@starting-style {
.fnv-toast { transform: none; }
}
.fnv-toast.is-leaving { transform: none; }
.fnv-toast__bar { display: none; }
}