snap-toaster {
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--size-fluid-3);
    position: fixed;
    z-index: var(--layer-important);

    display: grid;
    gap: 1vb;
    justify-items: end;
    justify-content: end;
    pointer-events: none;

    .toast {
        --duration: 5s;
        --travel-distance: 0;

        @media (prefers-reduced-motion: no-preference) {
            --travel-distance: var(--size-fluid-3);
        }

        /* TODO: replace with tokens */
        background-color: var(--surface-raised, white);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-2);
        max-inline-size: min(45ch, 90vi);
        padding: var(--size-3);
        will-change: transform;
        word-wrap: break-word;
        animation: fade-in 300ms ease,
        slide-in 300ms ease,
        fade-out 3s ease var(--duration);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes slide-in {
    from {
        transform: translateY(var(--travel-distance));
    }
}