$boxSize-small: 80px;
$boxSize-middle: 120px;
$boxSize-large: 150px;

@include b('avatar-uploader') {
  @include e('box') {
    width: $boxSize-middle;
    height: $boxSize-middle;
    overflow: hidden;
    border-radius: 4px;
    border: 1px dashed var(--el-border-color-dark);
    background-color: var(--el-fill-color-lighter);
    display: flex;
    justify-content: center;
    align-items: center;

    @include m('middle') {
      width: $boxSize-middle;
      height: $boxSize-middle;
    }

    @include m('small') {
      width: $boxSize-small;
      height: $boxSize-small;
    }

    @include m('large') {
      width: $boxSize-large;
      height: $boxSize-large;
    }
  }

  @include e('img') {
    max-width: 100%;
    max-height: 100%;
  }

  @include e('icon') {
    font-size: 20px;
    color: var(--el-text-color-secondary )
  }
}