/* Lightweight status message displayed above overlays and page content. */

.toast-region {
    position: fixed;
    z-index: var(--z-index-toast);
    right: var(--page-padding-inline);
    bottom: var(--space-5);
    left: var(--page-padding-inline);
    display: grid;
    pointer-events: none;
    place-items: center;
}

.toast {
    width: min(100%, var(--page-max-width));
    padding: var(--space-4) var(--space-5);
    border: var(--card-border-width) solid var(--color-border-active);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: var(--font-size-body-small);
    opacity: 0;
    text-align: center;
    transform: translateY(var(--space-3));
    transition:
        opacity var(--transition-interactive),
        transform var(--transition-interactive);
}

.toast[data-state="visible"] {
    opacity: 1;
    transform: translateY(var(--space-0));
}

.toast[data-state="leaving"] {
    opacity: 0;
    transform: translateY(var(--space-2));
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        transform: none;
        transition: none;
    }
}