//out: simple-alert-boxes.css

/*--------------------------------------------------
/* Alert Boxes Style
--------------------------------------------------*/
.simple-alert-boxes {
    box-sizing: border-box;
    border: 1px solid;
    font-size: 100%;
    margin: 1em 0;
    padding: 1em !important;
    position: relative;
    width: 100%;
}
.simple-alert-boxes *:last-child {
    margin-bottom: 0;
}

.simple-alert-boxes.normal {padding-left: 2.884em !important;}
.simple-alert-boxes.small {padding-left: 2.667em !important;}
.simple-alert-boxes.big {padding-left: 4em !important;}

.simple-alert-boxes.normal::before {left: 0.842em;}
.simple-alert-boxes.small::before {left: 1.333em;}
.simple-alert-boxes.big::before {left: 0.500em;}

.simple-alert-boxes::before {
    font-family: 'dashicons';
    font-size: 120% !important;
    line-height: 0 !important;
    position: absolute;
    top: 50%;
    left: 1em;
}

.simple-alert-boxes.normal::before {font-size: 120% !important;}
.simple-alert-boxes.small::before {font-size: 75% !important;}
.simple-alert-boxes.big::before {font-size: 200% !important;}
.simple-alert-boxes.hide-icon::before {display: none;}

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

/*--------------------------------------------------
/* Icons
--------------------------------------------------*/

.simple-alert-boxes.info::before {content: "\f534";}
.simple-alert-boxes.success::before {content: "\f502";}
.simple-alert-boxes.warning::before {content: "\f534";}
.simple-alert-boxes.danger::before {content: "\f153";}

//--------------------------------------------------
// Palete
//--------------------------------------------------

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

/*--------------------------------------------------
/* Colors
--------------------------------------------------*/

.simple-alert-boxes {
    .color-palete(#555555, #EEEEEE);
}
.info {
    .color-palete(#31708f, #D9EDF7);
}
.success {
    .color-palete(#3c763d, #DFF0D8);
}
.warning {
    .color-palete(#8a6d3b, #FCF8E3);
}
.danger {
    .color-palete(#a94442, #F2DEDE);
}