@layer app {
  /* ============================================================
     Avatar utilities
     ============================================================ */

  .avatar {
    --avatar-size: 48px;
    --avatar-font-size: 1rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    font-size: var(--avatar-font-size);
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;

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

  .avatar-xs {
    --avatar-size: 24px;
    --avatar-font-size: 0.6rem;
  }

  .avatar-sm {
    --avatar-size: 32px;
    --avatar-font-size: 0.75rem;
  }

  .avatar-md {
    --avatar-size: 48px;
    --avatar-font-size: 1rem;
  }

  .avatar-lg {
    --avatar-size: 80px;
    --avatar-font-size: 1.5rem;
  }

  .avatar-xl {
    --avatar-size: 120px;
    --avatar-font-size: 2rem;
  }
}