.message {
    padding: 0.5rem;
    background-color: grey;
    border-radius: 0.5rem;
    animation: slide-in 0.5s ease-out, slide-out 0.5s ease-in 10s forwards 1;
    z-index: 5;
}

.retain {
    animation: none;
}

.floating {
    position: absolute;
    top: 5rem;
    right: 5rem;
}

.success {
    background-color: green !important;
    color: white !important;
}

.success::before {
    content: "✔";
    margin-right: .5rem;
}

.info {
    background-color: #ddd !important;
    color: black !important;
    border: 1px solid #ccc;
}

.info::before {
    content: "ℹ";
    margin-right: .5rem;
}

.error {
    background-color: var(--message-error-background-color) !important;
    color: white !important;
    background-color: rgb(220, 15, 15) !important;
}

.error::before {
    content: "⚠";
    margin-right: .5rem;
}