yak-user-card {
  --user-name-font-size: 14px;
  --user-designation-font-size: 12px;

  --avatar-height: 32px;
  
  --text-muted: #6b7280;
}



yak-user-card {
  display: inline-flex;
  height: fit-content;

  &:hover {
    filter: brightness(0.8);
  }
  
  .user-card {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
  
  .user-avatar {
    height: var(--avatar-height);
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .user-info {
    display: flex;
    flex-direction: column;
  }
  
  .user-name-section {
    display: flex;
    
    .user-name {
      font-size: var(--user-name-font-size);
      color: var(--text-muted);
      
    }
  }
  
  .user-designation {
    font-size: var(--user-designation-font-size);
    line-height: 100%;
    color: #0006;
  }
}