@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.alert(@theme, @bg-color) {
    &--@{theme} {
        color: @alert-color;
        background-color: @bg-color;
    }
}

.@{wux-prefix}-alert {
    padding: 10px 15px;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: @alert-border-radius;
    font-size: @alert-font-size;

    &__thumb {
        .square(@alert-thumb-size);

        display: block;
        margin-right: @alert-thumb-margin;
    }

    &__bd {
        flex: 1;
    }

    &__text {
        text-align: left;
    }

    &__desc {
        text-align: left;
        line-height: 1.2;
        font-size: 12px;
    }

    &__ft {
        display: flex;
        align-self: center;
        text-align: right;
    }

    &__closable:not(:empty) {
        flex: none;
        display: flex;
        align-items: center;
        margin-left: @margin-component-base;
        cursor: pointer;
    }

    .alert(light, @alert-light-bg);
    .alert(stable, @alert-stable-bg);
    .alert(positive, @alert-positive-bg);
    .alert(calm, @alert-calm-bg);
    .alert(assertive, @alert-assertive-bg);
    .alert(balanced, @alert-balanced-bg);
    .alert(energized, @alert-energized-bg);
    .alert(royal, @alert-royal-bg);
    .alert(dark, @alert-dark-bg);
}