// _alerts.scss

.alert  {
    
    background-color: #f7f7f7;
    border: 2px solid #bab7b7;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 0px;
    
    > p, > ul {
        
        margin-bottom: 0;
    
    }

    &:empty {
        display: none;
    }

    &.alert-success {

        background-color: #dfebf5;
        border-color: #026ead;
        color: #026ead;

        &.alert-img {
            background-image: url('../oa/images/alert-success-icon.svg');
            background-repeat: no-repeat;
            background-position: 10px 7px;
            padding-left: 40px;
        }

    }

    &.alert-danger {
        
        background-color: #fcd7d4;
        border-color: #d46258;
        color: #d46258;

        &.alert-img {
            background-image: url('../oa/images/alert-danger-icon.svg');
            background-repeat: no-repeat;
            background-position: 10px 7px;
            padding-left: 40px;
        }

    }

    &.alert-warning {
        
        background-color: #fffbc4;
        border-color: #e18752;
        color: #e18752;

        &.alert-img {
            background-image: url('../oa/images/alert-warning-icon.svg');
            background-repeat: no-repeat;
            background-position: 10px 7px;
            padding-left: 40px;
        }
        
    }

    &.alert-warning-gentle {
        
        background-color: #fefbea;
        border-color: #fdf0a7;
        color: $rhino;

        &.alert-img {
            background-image: url('../oa/images/alert-warning-gentle-icon.svg');
            background-repeat: no-repeat;
            background-position: 10px 7px;
            padding-left: 40px;
        }
        
    }

    &.alert-warning {
        
        background-color: #fffbc4;
        border-color: #e18752;
        color: #e18752;

        &.alert-img {
            background-image: url('../oa/images/alert-warning-icon.svg');
            background-repeat: no-repeat;
            background-position: 10px 7px;
            padding-left: 40px;
        }
        
    }

    &.alert-warning-orange {
        
        background-color: #fff3ea;
        border-color: #fff3ea;
        color: #ff893e;

        &.alert-img {
            background-image: url('../oa/images/alert-warning-orange-icon.svg');
            background-repeat: no-repeat;
            background-position: 10px 15px;
            padding-left: 50px;
        }
        
    }
    
}