@use "../common/utils" as *;
@use "../common/mixins" as *;

.alert {
    $this: &;
    padding: calc-rem(15px);
    border-radius: calc-rem(10px);
    margin-bottom: calc-rem(15px);

    p {
        margin-bottom: calc-rem(10px);
    }

    p:last-child {
        margin-bottom: 0;
    }

    ul {
        margin-left: calc-rem(20px);
        margin-bottom: 0;
    }

    &--success {
        background: rgba(var(--color-success), 1);
        color: #FFF;
    }

    &--error {
        background: rgba(var(--color-danger), 1);
        color: #FFF;
    }

    &--info {
        border: 1px solid rgba(var(--color-info), 1);
        color: rgba(var(--color-info), 1);
        background: rgba(var(--color-info), .03) url('../images/icons/icon-info.svg') no-repeat top 20px left 15px;
        font-variation-settings: var(--font-variation-settings-bold);
        padding-left: calc-rem(40px);
    }
}
