.alert {
    position:    relative;
    text-align:  left;
    padding:     10px 15px;
    min-height:  30px;
    margin:      1em 0 0;
    border:      none;
    border-left: 3px solid;
    p {
        margin: 1.5em 0 0;

        &:first-child {
            margin: 0;
        }
    }
    &:not(.no-icon) {
        padding-left: 55px;

        &:before {
            position:    absolute;
            top:         10px;
            left:        15px;
            font-family: 'FontAwesome';
            font-size:   2.5rem;
        }
    }
    &.info {
        border-color:     map-get($colors, 'primary');
        background-color: lighten(map-get($colors, 'primary'), 37%);

        &:not(.no-icon) {
            &:before {
                content: "\f05a";
                color:   map-get($colors, 'primary');
            }
        }
    }
    &.success {
        border-color:     map-get($colors, 'success');
        background-color: lighten(map-get($colors, 'success'), 42%);
        content:          "\f058";
        &:not(.no-icon) {
            &:before {
                content: "\f058";
                color:   map-get($colors, 'success');
            }
        }
    }
    &.warning {
        border-color:     map-get($colors, 'warning');
        background-color: lighten(map-get($colors, 'warning'), 42%);
        &:not(.no-icon) {
            &:before {
                content: "\f071";
                color:   map-get($colors, 'warning');
            }
        }
    }
    &.danger {
        border-color:     map-get($colors, 'danger');
        background-color: lighten(map-get($colors, 'danger'), 42%);
        &:not(.no-icon) {
            &:before {
                content: "\f05e";
                color:   map-get($colors, 'danger');
            }
        }
    }
}