main > .sidebar-toasts{
    position: absolute;
    left: 0;
    bottom: 40vh;

    width: 100%;

    .toast-container{
        padding: 1rem .5rem;
    }
}

.toast-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;

    width: 100%;

    /* add blurred white background only if toasts are visible */
    &:has(.show)::after,
    &:has(.showing)::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        filter: blur(2rem);

        z-index: 1;
    }

    .toast{
        margin: 0;
        --bs-toast-bg: white;
        --bs-toast-header-bg: white;

        z-index: 2;
    }
}

@media (min-width: 480px){
    main > .sidebar-toasts{
        bottom: 0;
        top: .75rem;
        left: .75rem;

        width: 350px;
        max-width: 100%;
        height: max-content;

        &:not(:has(.show)):not(:has(.showing)){
            display: none;
        }
    }

    .toast-container{
        padding: 2rem;
    }
}