import { style } from '@vanilla-extract/css';

import { vars } from '../css';

const avatarVars = vars.components.avatar;

export const avatar = style({
  display: 'inline-block',
  flexShrink: 0,
  overflow: 'hidden',
  width: avatarVars.sizes.base,
  height: avatarVars.sizes.base,
  aspectRatio: '1/1',

  userSelect: 'none',
  backgroundColor: vars.colors['base-up'],
  border: '1px solid currentColor',
});

export const image = style({
  width: '100%',
  height: '100%',
  objectFit: 'cover',
});

export const fallback = style({
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: '100%',
  height: '100%',

  borderRadius: 'inherit',
});