// out: simple-alert-boxes.css

/*==============================================================================
                                    BASE
==============================================================================*/
.simple-alert-boxes {
    box-sizing: border-box;
    font-size: 100%;
    margin: 1em 0;
    position: relative;
    width: 100%;
}
.simple-alert-boxes *:last-child {
    margin-bottom: 0;
}

.simple-alert-boxes::before {
    line-height: 0 !important;
}

.simple-alert-boxes.sab_normal::before {font-size: 120% !important;}
.simple-alert-boxes.sab_small::before {font-size: 75% !important;}
.simple-alert-boxes.sab_big::before {font-size: 200% !important;}
.simple-alert-boxes.sab_hide-icon::before {display: none;}

.simple-alert-boxes::after {
    content: "";
    display: block;
    clear: both;
}

/*==============================================================================
                                    ICONS
==============================================================================*/

/* FontAwesome */
.simple-alert-boxes::before {
    width: 1em;
    text-align: center;
    font-family: FontAwesome;
}
.simple-alert-boxes.sab_info::before {content: "\f129";}
.simple-alert-boxes.sab_success::before {content: "\f00c";}
.simple-alert-boxes.sab_warning::before {content: "\f12a";}
.simple-alert-boxes.sab_danger::before {content: "\f00d";}

/*==============================================================================
                                    THEMES
==============================================================================*/

.palete(@color, @bgcolor) {
    background: @bgcolor;
    border-color: lighten(@color, 40%);
    color: @color !important;
    h1, h2, h3, h4, h5, h6, a, strong {
        color: darken(@color, 10%) !important;
    }
}

.simple-alert-boxes {
    border: 1px solid;
    padding: 1em !important;

    &::before {
        position: absolute;
        top: 50%;
        left: 1em;
    }

    &.sab_info {
        .palete(#31708f, #D9EDF7);
    }
    &.sab_success {
        .palete(#3c763d, #DFF0D8);
    }
    &.sab_warning {
        .palete(#8a6d3b, #FCF8E3);
    }
    &.sab_danger {
        .palete(#a94442, #F2DEDE);
    }

    &.sab_normal {
        padding-left: 2.884em !important;
    }
    &.sab_small {
        padding-left: 2.667em !important;
    }
    &.sab_big {
        padding-left: 4em !important;
    }

    &.sab_normal::before {
        left: 0.842em;
    }
    &.sab_small::before {
        left: 1.333em;
    }
    &.sab_big::before {
        left: 0.500em;
    }
}