@import './variable.scss';

@mixin circleShape($width) {
  width: $width;
  height: $width;
  min-width: $width;
  min-height: $width;
  border-radius: 50%;
}

@mixin fontSize($fontSize) {
  @if $fontSize == 10px {
      font-size: 12px;
      transform: scale(.83);
  }

 @else {
      font-size: $fontSize;
  }
}

.x-person-avatar {
  @include circleShape(24px);
  display: flex;
  overflow: hidden;
  color: $--app-white-font-color;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  .img-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .default-avatar {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: $--app-primary-color;
    justify-content: center;
    align-items: center;
    span {
      @include fontSize(10px);
    }
  }
}