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

export const RoomAvatar = style({
  backgroundColor: color.Secondary.Container,
  color: color.Secondary.OnContainer,
  textTransform: 'capitalize',

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

// See `UserAvatar.css.ts` for the rationale — same one-liner override forces
// every RoomAvatar (rooms, spaces, DMs, bridged puppets) into a circle without
// touching callsites.
globalStyle(`*:has(> .${RoomAvatar})`, {
  borderRadius: '50% !important',
});