/* extends base.css
 needs :root from base.css */

.message {
    padding: 0.5rem;
    background-color: grey;
    border-radius: 0.5rem;
    animation-name: fade-out;
    animation-duration: 1s;
    animation-delay: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*.message:hover {
    animation-name: none;
    background-color: lightgrey;
}*/

.retain {
    animation: none;
}

.floating {
    position: absolute;
    top: 1rem;
    left: 50vw;
    transform: translate(-50%, 0);
}

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

.success:hover {
    background-color: darkgreen !important;
}

.info {
    background-color: var(--message-info-background-color) !important;
    color: black !important;
    border: 1px solid #ccc;
}

.info:hover {
    background-color: #ddd !important;
}

.error {
    background-color: var(--message-error-background-color) !important;
    color: black !important;
    border: 1px solid red;
}

.error:hover {
    background-color: #fdd !important;
}
