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

export const AvatarPresence = style({
  display: 'flex',
  position: 'relative',
  flexShrink: 0,
});

export const AvatarPresenceBadge = style({
  position: 'absolute',
  bottom: 0,
  right: 0,
  transform: 'translate(25%, 25%)',
  zIndex: 1,

  display: 'flex',
  padding: config.borderWidth.B600,
  backgroundColor: 'inherit',
  borderRadius: config.radii.Pill,
  overflow: 'hidden',
});

export const PresenceAvatarContainer = style({
  display: 'flex',
  position: 'relative',
  flexShrink: 0,
  alignSelf: 'flex-start',
  '::before': {
    content: '""',
    position: 'absolute',
    left: 0,
    top: '10%',
    height: '80%',
    width: '3px',
    borderTopRightRadius: '2px',
    borderBottomRightRadius: '2px',
    zIndex: 1,
  },
});

export const PresenceIndicator = style({});

export const PresenceOnline = style({
  '::before': {
    backgroundColor: color.Success.Main,
  },
});

export const PresenceUnavailable = style({
  '::before': {
    backgroundColor: color.Warning.Main,
  },
});

export const PresenceOffline = style({
  '::before': {
    backgroundColor: color.Secondary.Main,
  },
});