@import "mixins/mixins";
@import "common/var";

@include b(avatar) {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: $--avatar-font-color;
  background: $--color-fill-5;
  font-size: $--font-size-body-3;
  width: $--avatar-large-size;
  height: $--avatar-large-size;
  font-size: $--font-size-title-3;
  [class^="el-icon-"],
  [class*=" el-icon-"] {
    font-size: 32px;
  }

  >img {
    display: block;
    height: 100%;
    width: 100%;
  }

  .el-avatar--text-wrap {
    // position: absolute;
    // transform: translate(-50%);
    // transform-origin: 0 center;
    // font-size: 15px;
    line-height: 22px;
    white-space: nowrap;
    padding: 0 6px;
  }

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

  @include m(square) {
    // border-radius: $--avatar-border-radius;
    border-radius: $--border-radius-medium;
    &.el-avatar--large{
      // border-radius: $--avatar-border-radius;
      border-radius: $--border-radius-medium;
    }
    &.el-avatar--medium{
      border-radius: $--border-radius-small;
    }
    &.el-avatar--small{
      border-radius: $--border-radius-small;
    }
    &.el-avatar--mini{
      border-radius: $--border-radius-small;
    }
  }

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

  @include m(large) {
    // width: $--avatar-large-size;
    // height: $--avatar-large-size;
    transform: scale(1);
    line-height: $--avatar-large-size;
    &.el-avatar--icon {
      font-size: 32px;
      [class^="el-icon-"],
      [class*=" el-icon-"] {
        font-size: 32px;
      }
    }
  }

  @include m(medium) {
    // width: $--avatar-medium-size;
    // height: $--avatar-medium-size;
    transform: scale(0.625);
    line-height: $--avatar-medium-size;
  }

  @include m(small) {
    // width: $--avatar-small-size;
    // height: $--avatar-small-size;
    transform: scale(0.5);
    line-height: $--avatar-small-size;
    &.el-avatar--icon {
      font-size: $--font-size-title-1
    }
  }

  @include m(mini) {
    // width: $--avatar-mini-size;
    // height: $--avatar-mini-size;
    transform: scale(0.375);
    line-height: $--avatar-mini-size;
    &.el-avatar--icon {
      font-size: $--font-size-body-1
    }
  }

  .el-avatar--edit-icon {
    display: none;
  }

  @include when(interactive) {
    position: relative;
    cursor: pointer;

    &:before {
      pointer-events: none;
      content: "";
      position: absolute;
      z-index: 1;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background: rgba(29, 33, 41, 0.6);
    }
    .el-avatar--edit-icon {
      position: absolute;
      z-index: 1;
      display: block;
      left: calc(50% - 7px);
      top: calc(50% - 7px);
      color: #fff;
      font-size: $--font-size-body-3;
    }
  }

  @include and(is-login) {
    background: $--primary-6;
  }
}