/**
 * @name Retro Avatar
 * @group components
 * @description
 * Square bevelled tile for a user glyph, emoji or initial. The demo pages were
 * hand-rolling this with inline width/height/flex styles on every instance.
 * @example html
 *   <div class="retro-avatar retro-bg-primary">🧑‍💻</div>
 *   <div class="retro-avatar retro-avatar-lg retro-bg-success">AB</div>
 */
.retro-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: var(--retro-font-size-lg);
  line-height: 1;
  font-weight: var(--retro-font-weight-bold);
  background: var(--retro-light);
  color: var(--retro-text);
  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
  box-shadow: var(--retro-border-raised);
  overflow: hidden;
  user-select: none;

  img { width: 100%; height: 100%; object-fit: cover; }

  &-sm { width: 28px; height: 28px; font-size: var(--retro-font-size-sm); }
  &-lg { width: 56px; height: 56px; font-size: var(--retro-font-size-2xl); }
  &-xl { width: 72px; height: 72px; font-size: var(--retro-font-size-3xl); }
}