.toast {
    position: fixed;
    bottom: 2em;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em 2em 1em 1em;
    background-color: #333;
    border-top: solid thick white;
    min-height: 50px;
    height: auto;
    z-index: 1;
}

.close_toast_btn {
    cursor: pointer;
}

.close_toast_btn:hover {
    opacity: 0.8;
}

.fadeout_toast {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear;
}

.success {
    border-color: var(--success);
    animation: fade ease-in-out 5s;
    animation-fill-mode: forwards;
}

.warning {
    border-color: var(--warning);
}

.error {
    border-color: var(--error);
}

@keyframes fade {
    0% {
        opacity: 1
    }

    20% {
        opacity: 1
    }

    80% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}