:root {
    --toast-gap: var(--pico-spacing);
    --toast-max-width: 90vw;

    --toast-in-ms: 180ms;
    --toast-hold-ms: 3200ms;
    --toast-out-ms: 220ms;
}

.toasts {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--toast-gap);
    z-index: 9999;
    pointer-events: none;
}

.toast {
    max-width: var(--toast-max-width);
    background: var(--pico-color-slate-800);
    color: #fff;
    border-radius: var(--pico-border-radius);
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    opacity: 0;
    transform: translateY(var(--pico-spacing));
    word-break: break-word;
}

.toast--auto {
    animation: toast-in var(--toast-in-ms) cubic-bezier(.2, .8, .2, 1) forwards,
    toast-hold var(--toast-hold-ms) linear forwards,
    toast-out var(--toast-out-ms) linear forwards;
    animation-delay: 0s,
    var(--toast-in-ms),
    calc(var(--toast-in-ms) + var(--toast-hold-ms));
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(var(--pico-spacing));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-hold {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(var(--pico-spacing));
        visibility: hidden;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast--auto {
        animation: none;
        opacity: 1;
        transform: none;
    }
}