<script lang="ts">
  /**
   * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.
   *
   * @slot default - Use this slot to insert the image, icon or intials of the avatar.
   */
  interface Props {
    [key: string]: any;
    /**
     * Determines the size of the avatar.
     */
    size: 's' | 'm' | 'l';
  }

  let { size = 's', class: className, ...attrs }: Props = $props();
</script>

<div class={['mc-avatar', size && `mc-avatar--${size}`, className]} {...attrs}>
  <slot />
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: var(--border-radius-full, 100%);
  background: var(--color-background-secondary, #eff1f6);
  color: var(--color-text-secondary, #404040);
  font-size: var(--font-size-50, 0.75rem);
  font-weight: var(--font-weight-semi-bold, 600);
  text-transform: uppercase;
}
.mc-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mc-avatar--m {
  width: 3rem;
  height: 3rem;
  font-size: var(--font-size-200, 1.125rem);
}
.mc-avatar--l {
  width: 4rem;
  height: 4rem;
  font-size: var(--font-size-300, 1.5rem);
}

::slotted(img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}</style>
