#toast-container {
    position: fixed;
    bottom: 5vh;
    right: 5vh;

    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.toast {
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    opacity: 0;

    border-style: solid;
    border-width: 2px;
    border-color: var(--toast-border);

    border-radius: 5px;


    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.success {
    background: var(--toast-success);
}

.toast.info {
    background: var(--toast-neutral);
}

.toast.error {
    background: var(--toast-error);
}

.toast.show {
    opacity: 1;
}