:host {
  display: inline-block;
  --size: 3rem;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;

  font-size: calc(var(--size) * 0.5);
  font-weight: $font-weight-400;
  overflow: hidden;
  user-select: none;
  vertical-align: middle;

  &__initials {
    line-height: 1;
    font-weight: 600;
    font-size: 32px;
    text-align: center;
    text-transform: uppercase;
  }
  &__image {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &--dark {
    background-color: $avatar-background-dark;
    color: $color-milk;

    &--initials {
      border: $avatar-border-dark;
    }

    &--default {
      background-color: $avatar-background-default;
    }
  }

  &--light {
    background-color: $avatar-background-light;
    color: $color-elephant-900;

    &--initials {
      border: $avatar-border-light;
    }
  }

  &--error {
    background-color: $avatar-background-error;
    color: $color-elephant-900;

    &--initials {
      border: $avatar-border-error;
    }
  }

  &--circle {
    border-radius: 50%;
  }
  &--rounded {
    border-radius: 4px;
  }
  &--square {
    border-radius: 0;
  }

  &--xxlarge {
    width: 96px;
    height: 96px;
    .avatar__initials {
      font-size: 32px;
    }
  }
  &--xlarge {
    width: 72px;
    height: 72px;
    .avatar__initials {
      font-size: 24px;
    }
  }
  &--large {
    width: 56px;
    height: 56px;
    .avatar__initials {
      font-size: 20px;
    }
  }
  &--medium {
    width: 40px;
    height: 40px;
    .avatar__initials {
      font-size: 16px;
    }
  }
  &--small {
    width: 32px;
    height: 32px;
    .avatar__initials {
      font-size: 14px;
    }
  }
  &--xsmall {
    width: 24px;
    height: 24px;
    .avatar__initials {
      font-size: 12px;
    }
  }
  &--xxsmall {
    width: 20px;
    height: 20px;
    .avatar__initials {
      font-size: 10px;
    }
  }
}
