/*
 * Avatar Component
 * User avatar with icon fallback
 */

@layer components {
  .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    background-color: var(--color-gray-darker);
    border-radius: var(--radius);

    & .icon {
      inline-size: var(--icon-md);
      block-size: var(--icon-md);
      color: var(--color-white);
    }
  }

  /* Author avatar (landing page) */
  .author-avatar {
    inline-size: 10rem;
    block-size: 10rem;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: var(--border-standard);

    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  /* Testimonial avatar placeholder */
  .testimonial-avatar {
    inline-size: 5rem;
    block-size: 5rem;
    border-radius: var(--radius-full);
    border: var(--border-standard);
    background-color: var(--color-gray-lightest);
    margin-inline: auto;
    margin-block-end: var(--block-space);
  }
}