/* The toasts' own styling, next to the script that retires them. Plain CSS reaching
   for the theme tokens, because a co-located file skips the Tailwind build. */

[data-next-toasts] {
    position: fixed;
    inset-inline: 1rem;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    display: grid;
    gap: .5rem;
    z-index: 60;
    pointer-events: none;
}

/* Above lg the bottom tab bar is gone, so the toasts move out of its way. */
@media (min-width: 1024px) {
    [data-next-toasts] {
        inset-inline: auto 1.25rem;
        bottom: 1.25rem;
        width: min(22rem, calc(100vw - 2.5rem));
    }
}

[data-next-toast] {
    padding: .75rem 1rem;
    border-radius: var(--radius-field);
    border: 1px solid var(--lz-line);
    border-inline-start: 3px solid var(--lz-accent);
    background: var(--lz-toast);
    color: var(--lz-body);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9rem;
    box-shadow: 0 10px 30px -12px rgb(0 0 0 / .35);
    pointer-events: auto;
    cursor: pointer;
    transition: opacity .24s ease, transform .24s ease;
}

[data-next-toast][data-leaving] {
    opacity: 0;
    transform: translateY(.5rem);
}

[data-next-toast="error"] { border-inline-start-color: var(--lz-spend); }
[data-next-toast="info"] { border-inline-start-color: var(--lz-sage); }