$prefix-avatar: #{$prefix}avatar;

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

    & > * {
        line-height: $size;
    }

    &.#{$prefix-avatar}-icon {
        font-size: $font-size;
    }
}

.#{$prefix-avatar} {
    display: inline-block;
    text-align: center;
    @include get-color-border(background-color);
    @include get-color-bg(color);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;

    &-image{
        background: transparent;
    }

    &.#{$prefix-avatar}-icon{
        position: relative;
        top: -1px;
    }

    @include avatar-size(32px, 18px);

    &-large {
        @include avatar-size(40px, 24px);
        &.#{$prefix-avatar}-icon{
            position: relative;
            top: -2px;
        }
    }

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

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

    & > img {
        width: 100%;
        height: 100%;
    }
}