@use '../../../../mx-core/src/base/shape';
@use '../../../../mx-core/src/base/typography';

$size-sm: 24px;
$size-md: 32px;
$size-lg: 48px;
$size-xl: 64px;
$size-xxl: 112px;

@mixin avatar($size: $size-sm) {
  width: $size;
  height: $size;
  line-height: $size;
}

:host {
  @extend .rounded-full;
  display: inline-block;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
  box-sizing: border-box;

  &.mx-avatar {
    &__sm {
      @extend .gl-label-sm;
      @include avatar($size-sm);
    }
    &__md {
      @extend .gl-label-md;
      @include avatar($size-md);
    }
    &__lg {
      @extend .gl-title-md;
      @include avatar($size-lg);
    }
    &__xl {
      @extend .gl-headline-lg;
      @include avatar($size-xl);
    }
    &__xxl {
      @extend .gl-display-lg;
      @include avatar($size-xxl);
    }
  }
}

.mx-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}