joomla-alert {
    display: flex !important;
    align-items: stretch;
    gap: 1rem;
    padding: 0 !important;
    position: relative;
}

joomla-alert .joomla-alert--close {
    position: absolute !important;
    top: 0.1rem !important;
    right: 0.1rem !important;
    padding: 0.2rem 0.5rem !important;
    transition: opacity 0.15s ease;
}

joomla-alert .joomla-alert--close:hover {
    opacity: 1 !important;
}

joomla-alert .alert-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    flex-shrink: 0;
    color: #fff;
    padding: 0.5rem;
    border-radius: 4px 0 0 4px;
}



joomla-alert .alert-wrapper {
    flex-grow: 1;
    padding: .5rem 0;
    margin-right: 2rem;
    align-items: center;
}

joomla-alert .error, joomla-alert .success, joomla-alert .danger, joomla-alert .message, joomla-alert .notice, joomla-alert .info, joomla-alert .warning {
    display: flex;
    align-items: center;
}


#system-message-container joomla-alert div .alert-message:not(:first-of-type) {
    border-top: 1px solid var(--alert-accent-color);
}

joomla-alert .alert-heading .danger::after, joomla-alert .alert-heading .error::after {
    font-family: "bootstrap-icons";
    content: "\F659"; 
    font-size: 1.5rem;
    line-height: 1;
}
joomla-alert .alert-heading .message::after, joomla-alert .alert-heading .success::after {
    font-family: "bootstrap-icons";
    content: "\F26E";
    font-size: 1.5rem;
    line-height: 1;
}
joomla-alert .alert-heading .notice:after, joomla-alert .alert-heading .info:after {
    font-family: "bootstrap-icons";
    content: "\F333"; 
    font-size: 1.5rem;
    line-height: 1;
}
joomla-alert .alert-heading .warning:after {
    font-family: "bootstrap-icons";
    content: "\F627"; 
    font-size: 1.5rem;
    line-height: 1;
}

joomla-alert[type=danger] .alert-heading {
    background-color: color-mix(in srgb, var(--jui-alert-danger-color) 70%, white 30%);
}

joomla-alert[type=success] .alert-heading {
    background-color: color-mix(in srgb, var(--jui-alert-success-color) 70%, white 30%);
}

joomla-alert[type=warning] .alert-heading {
    background-color: color-mix(in srgb, var(--jui-alert-warning-color) 70%, white 30%);
}