@use '../style/base' as *;

@include bem(avatar) {
  @include b() {
    @include universal;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--sar-avatar-width);
    height: var(--sar-avatar-height);
    font-size: var(--sar-avatar-font-size);
    background: var(--sar-avatar-bg);
    border: 1px solid transparent;
  }

  @include e(image) {
    @include universal;
    width: 100%;
    height: 100%;
  }

  @include m(circle) {
    border-radius: var(--sar-rounded-full);
  }

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

  @include m(in-group) {
    border-color: var(--sar-avatar-border-color);
  }

  @include e('remain') {
    @include universal;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: var(--sar-avatar-remain-font-size);
    color: var(--sar-avatar-remain-color);
    background: var(--sar-avatar-remain-bg);
    border-radius: inherit;
  }
}