@import "../styles/base/fn.wxss";

.@{wuxClassNamePrefix}-avatar {
    font-family: Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .65);
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    .avatar-size(32px, 18px);

    &--small {
        .avatar-size(24px, 14px);
    }

    &--large {
        .avatar-size(40px, 24px);
    }

    &--square {
        border-radius: 4px;
    }

    &--thumb {
        background: transparent;
    }

    > image {
        width: 100%;
        height: 100%;
    }
}

.avatar-size(@size, @font-size) {
    width: @size;
    height: @size;
    line-height: @size;
    border-radius: @size / 2;
    font-size: @font-size;

    .@{wuxClassNamePrefix}-avatar__string {
        line-height: @size;
    }
}