@import '../../style/variables.less';
@orange     : #ff5401;
@avatar-size: 36px;

.@{prefix}-avatar-img {
    width        : @avatar-size;
    height       : @avatar-size;
    border-radius: 50%;
}

.@{prefix}-avatar {
    display         : inline-block;
    flex-shrink     : 0;
    text-align      : center;
    height          : @avatar-size;
    width           : @avatar-size;
    line-height     : @avatar-size;
    border-radius   : 50%;
    background-color: #efefef;
    color           : #fff;
    font-size       : 12px;

    &.c0 {
        color: @maycur-color;
    }

    &.c1 {
        color: @icon-fee-purple;
    }

    &.c2 {
        color: darken(@orange, 10%);
    }

    &.c3 {
        color: @orange;
    }

    &.c4 {
        color: @icon-fee-blue-light3;
    }

    &.c5 {
        color: darken(@icon-fee-green-light1, 10%);
    }

    &.c6 {
        color: darken(@icon-fee-blue-light3, 20%);
    }

    &.c7 {
        color: @icon-fee-green-light1;
    }

    &.c8 {
        color: @icon-fee-orange;
    }

    &.c9 {
        color: darken(@icon-fee-orange, 20%);
    }

    &.c10 {
        color: @icon-fee-yellow
    }

    &.c11 {
        color: @icon-fee-brown;
    }

    &.c12 {
        color: @draft-color;
    }

    &.c13 {
        color: @pay-color;
    }

    &.c14 {
        color: @icon-fee-blue-light4;
    }
}