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

const tailTopBase = {
  content: '""',
  position: 'absolute' as const,
  top: toRem(-5),
  left: 'var(--speech-tail-x, 50%)',
  transform: 'translateX(-50%) rotate(45deg)',
  width: toRem(10),
  height: toRem(10),
};

export const SpeechBubble = style({
  position: 'relative',
  padding: `${toRem(8)} ${toRem(12)}`,
  backgroundColor: color.SurfaceVariant.Container,
  color: color.SurfaceVariant.OnContainer,
  borderRadius: config.radii.R300,
  boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
});

export const SpeechBubbleTailTop = style({
  selectors: {
    '&::before': {
      ...tailTopBase,
      backgroundColor: color.SurfaceVariant.Container,
    },
  },
});

/** Popover menus (kebab, etc.) — surface matches folds Menu. */
export const SpeechBubbleMenu = style({
  position: 'relative',
  padding: 0,
  backgroundColor: color.Surface.Container,
  color: color.Surface.OnContainer,
  borderRadius: config.radii.R400,
  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  boxShadow: '0 10px 28px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 12%)',
  overflow: 'visible',
});

export const SpeechBubbleMenuTailTop = style({
  selectors: {
    '&::before': {
      ...tailTopBase,
      backgroundColor: color.Surface.Container,
      borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
      borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
    },
  },
});

globalStyle(`${SpeechBubbleMenu} > *`, {
  background: 'transparent',
  border: 'none',
  boxShadow: 'none',
});