@alert-prefix-cls: ~"@{css-prefix}alert";
@icon-prefix-cls: ~"@{css-prefix}icon";

.@{alert-prefix-cls}{
    position: relative;
    padding: 10px 48px 10px 16px;
    border-radius: @border-radius-big;
    color: @color-complementary-1;
    font-size: @font-size-middle;
    line-height: 20px;
    margin-bottom: 10px;

    &&-with-icon{
        padding: 10px 48px 10px 48px;
    }

    &-icon {
        position: absolute;
        margin-top: -12px;
        top: 20px;
        left:20px;
        font-size: @font-size-large;
    }

    &-coll {
        color: @color-brand-primary;
        cursor: pointer;
    }

    &-desc {
        font-size: @font-size-base;
        color: @text-color;
        line-height: 21px;
        display: none;
        text-align: justify;
    }

    &-success {
        border: @border-width-base @border-style-base @green-200;
        background-color: @alert-bg-success;
        .@{alert-prefix-cls}-icon {
            color: @success-color;
        }
    }

    &-info {
        border: @border-width-base @border-style-base  @blue-200;
        background-color: @alert-bg-info;
        .@{alert-prefix-cls}-icon {
            color: @alert-icon-info;
        }
    }

    &-warning {
        border: @border-width-base @border-style-base @red-200;
        background-color: @alert-bg-warning;
        .@{alert-prefix-cls}-icon {
            color: @alert-icon-warning;
        }
    }

    &-error {
        border: @border-width-base @border-style-base @yellow-200;
        background-color: @alert-bg-fail;
        .@{alert-prefix-cls}-icon {
            color: @error-color;
        }
    }

    &-close {
        .content-close(0, 16px);
        top: 12px;
        &:hover{
          color: @alert-icon-close;
        }
        i {
          vertical-align: 0;
          color: @alert-icon-close!important;
        }
    }

    &-with-desc {
        padding: 16px;
        // position: relative;
        // border-radius: @border-radius-small;
        // margin-bottom: 10px;
        color: @text-color;
        // line-height: 1.5;
    }

    &-with-desc&-with-icon {
        // padding: 8px 47px 23px 39px;
    }

    &-with-desc &-desc{
        display: block;
    }

    &-with-desc &-message {
        // font-size: @font-size-large;
        // color: @title-color;
        // display: block;
        // margin-bottom: 4px;
    }

    &-line-space {
        line-height: 18px;
        span {
            margin-bottom: 4px;
        }
    }

    &-with-desc &-icon {
        // top: 50%;
        // top: 19px;
        // left: 12px;
        // margin-top: -24px;
        // font-size: 24px;
    }

    &-with-banner{
        border-radius: 0;
    }
}

.@{alert-prefix-cls}-small{
    padding: 8px 20px;
    font-size: @font-size-small;
    line-height: 18px;

    &&-with-icon{
        padding: 8px 20px 8px 38px;
    }

    &-icon {
        position: absolute;
        margin-top: -10px;
        top: 17px;
        left: 12px;
        font-size: @font-size-middle;
    }

    .@{alert-prefix-cls}-close {
        top: 10px;
    }
}