.gui-toast-group {
    position: fixed;
    z-index: 1;
    inset-block-end: 0;
    inset-inline: 0;
    padding-block-end: 5vh;
    margin-inline-end: 5vw;

    display: grid;
    justify-items: center;
    justify-content: end;
    gap: 1vh;

    pointer-events: none;
}

.gui-toast {
    --_bg-lightness: 90%;
    --_duration: 3s;
    --_travel-distance: 0;

    color: black;
    background: hsl(0 0% var(--_bg-lightness) / 90%);

    max-inline-size: min(25ch, 90vw);
    padding-block: .5ch;
    padding-inline: 1ch;
    border-radius: 3px;
    font-size: 1rem;

    will-change: transform;
    animation:
        fade-in .3s ease,
        slide-in .3s ease,
        fade-out .3s ease var(--_duration);
}

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

@keyframes fade-out {
    from { opacity: 0 }
}

@keyframes slide-in {
    from { transform: translateY(var(--_travel-distance, 10px)) }
}

@media (prefers-color-scheme: dark) {
    .gui-toast {
        color: white;
        --_bg-lightness: 20%;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .gui-toast {
        --_travel-distance: 5vh;
    }
}