import { globalStyle, style } from '@vanilla-extract/css';
import { color } from 'folds';

export const UserAvatar = style({
  backgroundColor: color.Secondary.Container,
  color: color.Secondary.OnContainer,
  textTransform: 'capitalize',
  // Centre-crop to fill the (always-circular) avatar box, so a `scale`
  // thumbnail (aspect-preserved — e.g. the 320 scale the profile hero requests
  // because Synapse caps `crop` thumbnails at 96px) covers the circle exactly
  // like a server-side crop would. No-op for the square crop thumbnails used
  // by the small avatars elsewhere.
  objectFit: 'cover',

  selectors: {
    '&[data-image-loaded="true"]': {
      backgroundColor: 'transparent',
    },
  },
});

// Force every UserAvatar to render as a circle. Folds `<Avatar>` controls the
// outer shape via its `radii` variant; the inner `AvatarImage`/`AvatarFallback`
// inherit `border-radius` from it. By overriding the parent's radius we round
// every user avatar without touching the ~30 callsites or losing the radii
// system for non-avatar uses of folds `<Avatar>` (icon tabs, emoji-pack tiles).
// `!important` is necessary because folds' recipe rule has the same specificity
// and source-order would otherwise be a coin flip.
globalStyle(`*:has(> .${UserAvatar})`, {
  borderRadius: '50% !important',
});
