@import '~styles/mixins';

.avatar {
  $indic_dim: 6px;

  position: relative;
  width: fit-content;
  background-color: $color-grey-background;
  border: 1px solid $color_border;
  font-weight: bold;
  text-transform: uppercase;
  @include ball(50px);

  span {
    color: $color_secondary;
    font-size: 20px;
  }
  &.small {
    @include ball(30px);
    span {
      font-size: 12px;
    }
  }
  &.medium {
    @include ball(40px);
    span {
      font-size: 15px;
    }
  }
  img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
  .indic {
    @include ball($indic_dim);
    font-size: 10px;
    color: white;
    background-color: $color-red;
    position: absolute;
    right: -1 * ($indic_dim*0.5);
    top: 50%;
    margin-top: -1 * ($indic_dim*0.5);
  }
}
