.euiAvatar {
  flex-shrink: 0; // Ensures it never scales down below its intended size
  display: inline-block;
  background-size: cover;
  text-align: center;
  vertical-align: middle;
  overflow-x: hidden;
  font-weight: $euiFontWeightMedium; // Explicitly state so it doesn't get overridden by inheritance
}

.euiAvatar--user {
  @include innerBorder('dark', 50%, .05);
  border-radius: 50%;
}

.euiAvatar--space {
  @include innerBorder('dark', $euiBorderRadius, .05);
  border-radius: $euiBorderRadius;
}

// Modifiers for sizing.
$avatarSizing: (
  s: (
    size: $euiSizeL,
    font-size: $euiSizeM
  ),
  m: (
    size: $euiSizeXL,
    font-size: $euiSize*.9
  ),
  l: (
    size: $euiSizeXXL,
    font-size: $euiSizeL*.8
  ),
  xl: (
    size: ($euiSize * 4),
    font-size: $euiSizeXL*.8
  ),
);

@each $size, $map in $avatarSizing {
  .euiAvatar--#{$size} {
    @include size(map-get($map, 'size'));
    line-height: map-get($map, 'size');
    font-size: map-get($map, 'font-size');
  }
}