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

export const MessageBase = style({
  position: 'relative',
});
export const MessageBaseBubbleCollapsed = style({
  paddingTop: 0,
});

export const MessageOptionsBase = style([
  DefaultReset,
  {
    position: 'absolute',
    top: toRem(-30),
    right: 0,
    zIndex: 1,
    // Extend hitbox to the left for easier hover targeting
    paddingLeft: toRem(100),
    marginLeft: toRem(-100),
  },
]);
export const MessageOptionsBar = style([
  DefaultReset,
  {
    padding: config.space.S100,
  },
]);

export const BubbleAvatarBase = style({
  paddingTop: 0,
});

export const MessageAvatar = style({
  cursor: 'pointer',
  position: 'relative',
  overflow: 'visible',
  borderTopLeftRadius: 0,
  borderBottomLeftRadius: 0,
  '::before': {
    content: '""',
    position: 'absolute',
    left: '-6px',
    top: '0%',
    height: '100%',
    width: '4px',
    borderTopLeftRadius: '5px',
    borderBottomLeftRadius: '5px',
    zIndex: 1,
    backgroundColor: 'transparent',
  },
});

export const MessageAvatarOnline = style({
  '::before': {
    backgroundColor: '#38842b',
  },
});

export const MessageAvatarUnavailable = style({
  '::before': {
    backgroundColor: '#959e30',
  },
});

export const MessageAvatarOffline = style({
  '::before': {
    backgroundColor: '#454545',
  },
});

export const MessageQuickReaction = style({
  minWidth: toRem(32),
});

export const MessageMenuGroup = style({
  padding: config.space.S100,
});

export const MessageMenuItemText = style({
  flexGrow: 1,
});

export const ReactionsContainer = style({
  selectors: {
    '&:empty': {
      display: 'none',
    },
  },
});

export const ReactionsTooltipText = style({
  wordBreak: 'break-word',
});
