.alert {
    border-bottom: 2px solid var(--ui-fg-color);
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
}
.alert::before {
    font-family: "Material Icons";
    font-size: 24px;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
}
.alert .alert-body {
    font-size: 0.85rem;
}
.alert .alert-body h4 {
    font-size: 1rem;
    margin-bottom: 0.1rem;
    font-weight: normal;
}
.alert .alert-close {
    margin-left: auto;
    cursor: pointer;
}
.alert.error {
    background: var(--ui-grapefruit-100);
}
.alert.error::before {
    content: "error_outline";
}
.alert.warning {
    background: var(--ui-sunflower-100);
}
.alert.warning::before {
    content: "warning_amber";
}
.alert.info {
    background: var(--ui-acqua-100);
}
.alert.info::before {
    content: "info_outline";
}
.alert.success {
    background: var(--ui-grass-100);
}
.alert.success::before {
    content: "check_circle_outline";
}
.alert.error .alert-body a.inline:hover {
    color: var(--ui-grapefruit-300);
}
.alert.warning .alert-body a.inline:hover {
    color: var(--ui-sunflower-300);
}
.alert.info .alert-body a.inline:hover {
    color: var(--ui-acqua-300);
}
.alert.success .alert-body a.inline:hover {
    color: var(--ui-grass-300);
}