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

// Small uniform rounding on ALL four corners (R400 = 8px) — the old
// asymmetric "notch toward sender" corner is gone; previews now read as
// plain rounded thumbnails on both own and peer sides.
const StreamMediaCornerSmall = config.radii.R400;
const StreamMediaCornerRound = config.radii.R500;

export const StreamMediaBubble = style({
  position: 'relative',
  overflow: 'hidden',
  backgroundColor: color.SurfaceVariant.Container,
  maxWidth: '100%',
  boxSizing: 'border-box',
  flexShrink: 0,
  borderRadius: StreamMediaCornerSmall,
  // 1px frame drawn ABOVE the image via a pseudo-element. `inset
  // box-shadow` would sit on the bg layer and get hidden by the
  // `<img>` filling 100% × 100%; a real `border` would push the
  // image's coordinate space and re-introduce the 1px chip-alignment
  // offset we just removed. The pseudo sits at z-index 1 (above
  // image's auto-stacked 0, below the username overlay at z 2),
  // inherits the bubble's border-radius, and is pointer-events:none so
  // clicks pass through to the image.
  selectors: {
    '&::after': {
      content: '""',
      position: 'absolute',
      inset: 0,
      border: `1.2px solid ${color.Surface.Container}`,
      borderRadius: 'inherit',
      pointerEvents: 'none',
      zIndex: 1,
    },
  },
});

// Caption mini-bubble under the image. Keeps a slightly larger R500 radius,
// intentionally distinct from the preview bubble's uniform R400.
export const StreamMediaCaption = style({
  marginTop: toRem(4),
  backgroundColor: color.SurfaceVariant.Container,
  color: color.SurfaceVariant.OnContainer,
  border: `1px solid ${color.Surface.Container}`,
  borderRadius: StreamMediaCornerRound,
  paddingLeft: config.space.S300,
  paddingRight: config.space.S300,
  paddingTop: config.space.S200,
  paddingBottom: config.space.S200,
  maxWidth: '100%',
  width: 'fit-content',
  boxSizing: 'border-box',
});