/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    ALERTS
    that implement the UU design system specifically for Sitevision

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Make sure headers in alerts never gets extra margin top as other headers */
.alert .sv-text-portlet:first-child :is(h2, h3),
.alert.sv-text-portlet :is(h2, h3):first-child {
    margin-top: 0 !important;
}

.alert .sv-text-portlet:first-child :is(h2, h3)::before,
.alert.sv-text-portlet :is(h2, h3):first-child::before {
    margin-right: 0.5rem;
    background-size: 1em;
    background-repeat: no-repeat;
    content: " ";
    display: inline-block;
    filter: invert(1);
    height: 1em;
    vertical-align: text-top;
    width: 1em;
}

.alert-info .sv-text-portlet:first-child :is(h2, h3)::before,
.alert-info.sv-text-portlet :is(h2, h3):first-child::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI0ZGRkZGRiI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xMiAyQzYuNDggMiAyIDYuNDggMiAxMnM0LjQ4IDEwIDEwIDEwIDEwLTQuNDggMTAtMTBTMTcuNTIgMiAxMiAyem0xIDE1aC0ydi02aDJ2NnptMC04aC0yVjdoMnYyeiIvPjwvc3ZnPg==);
}

.alert-warning .sv-text-portlet:first-child :is(h2, h3)::before,
.alert-warning.sv-text-portlet :is(h2, h3):first-child::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIGZpbGw9IiNGRkZGRkYiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48Zz48Zz48cGF0aCBkPSJNMTIsNS45OUwxOS41MywxOUg0LjQ3TDEyLDUuOTkgTTEyLDJMMSwyMWgyMkwxMiwyTDEyLDJ6Ii8+PHBvbHlnb24gcG9pbnRzPSIxMywxNiAxMSwxNiAxMSwxOCAxMywxOCIvPjxwb2x5Z29uIHBvaW50cz0iMTMsMTAgMTEsMTAgMTEsMTUgMTMsMTUiLz48L2c+PC9nPjwvZz48L3N2Zz4=);
}

.alert+.alert {
    margin-top: -1rem;
}

.env-alert {
    background-color: var(--color-white);
    border-color: var(--color-border);
    border-radius: 0;
    border-width: 1px 1px 1px 0.25rem;
    color: var(--color-text);
    margin: 0 0 var(--space-large) 0 !important;
    max-width: 100%;
    padding: var(--space-medium);
}

.env-alert--warning {
    border-left-color: var(--color-warning-dark);
}