@import 'mixins/mixins';
@import 'common/var';

:root {
  --el-avatar-font-color: #fff;
  --el-avatar-background-color: #c0c4cc;
  --el-avatar-text-font-size: 14px;
  --el-avatar-icon-font-size: 18px;
  --el-avatar-border-radius: var(--el-border-radius-base);
  --el-avatar-large-size: 40px;
  --el-avatar-medium-size: 36px;
  --el-avatar-small-size: 28px;
}

@include b(avatar) {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: var(--el-avatar-font-color);
  background: var(--el-avatar-background-color);
  width: var(--el-avatar-large-size);
  height: var(--el-avatar-large-size);
  line-height: var(--el-avatar-large-size);
  font-size: var(--el-avatar-text-font-size);

  > img {
    display: block;
    height: 100%;
    vertical-align: middle;
  }

  @include m(circle) {
    border-radius: 50%;
  }

  @include m(square) {
    border-radius: var(--el-avatar-border-radius);
  }

  @include m(icon) {
    font-size: var(--el-avatar-icon-font-size);
  }

  @each $size in (small, medium, large) {
    @include m($size) {
      width: var(--el-avatar-#{$size}-size);
      height: var(--el-avatar-#{$size}-size);
      line: var(--el-avatar-#{$size}-size);
    }
  }
}