:root {
    --transition: 0.25s;
    --ani-fade-out: fadeOutElement 0.5s 5s linear forwards, hideElement 0s 5.5s forwards;
    --ani-timer: timer 5s 0s linear forwards;
    --rem-xs: 0.75rem;
    --rem-s: 1rem;
    --rem-m: 1.25rem;
    --border-radius: 6px;
}

.message {
    width: 100%;
    padding: var(--rem-s);
    display: flex;
    align-items: center;
    gap: var(--rem-m);
    text-align: left !important;
    justify-content: space-between;
    z-index: 10000 !important;
}

.error {
    background-color: #FFBABA;
    color: #D8000C;
}

.success {
    background-color: #DFF2BF;
    color: #270;

    animation: var(--ani-fade-out);
    transition: var(--transition);
}

.info {
    background-color: #bde0ff;
    color: #158df7 !important;
    background-image: unset;
}

.message span {
    display: flex;
    align-items: center;
}

.message a.button { background-color: #158df7 !important; padding: 8px !important; background-image: unset !important; border-radius: var(--border-radius) !important; border: none !important; color: white; }
.message a.error { background-color: #D8000C !important; color: white !important; padding: 8px !important; background-image: unset !important; }
.message a.success { background-color: #270 !important; color: white !important; padding: 8px !important; background-image: unset !important; }
.message a.info { background-color: #158df7 !important; color: white !important; padding: 8px !important; background-image: unset !important; }

.timer {
    margin-top: calc((var(--rem-s) + 2px) * -1);
    padding-top: var(--rem-s);
    border-bottom-width: 2px;
    border-bottom-style: solid;

    animation: var(--ani-timer), var(--ani-fade-out);
    transition: var(--transition);
    transform-origin: left;
}

.timererror { border-color: #D8000C; }
.timersuccess { border-color: #270; }
.timerinfo { border-color: #158df7; }

@keyframes fadeOutElement {
    to {
        visibility: hidden;
        opacity: 0;
    }
}

@keyframes hideElement {
    to {
        width: 0;
        height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
}

@keyframes timer {
    to {
        transform: scaleX(0);
    }
}