import { style } from '@vanilla-extract/css';
import { color, toRem } from 'folds';
import { VOJO_HORSESHOE_RADIUS_PX } from '../../styles/horseshoe';

// Right-side media pane. Much wider than the profile pane —
// images need room to read comfortably. `clamp(480px, 50vw, 880px)`
// gives a generous minimum on narrow desktops while capping width
// on ultra-wide displays.
//
// Left edge rounded (TL + BL) to carve across the 12px horseshoe
// void gap rendered by `Room.tsx` — same design language as the
// profile pane and the page-nav <-> chat split.
//
// `Background.Container` (#0d0e11) chosen for the dark image
// backdrop — same logic as the mobile silhouette bg.
export const panel = style({
  flexShrink: 0,
  width: `clamp(${toRem(480)}, 50vw, ${toRem(880)})`,
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: color.Background.Container,
  minHeight: 0,
  overflow: 'hidden',
  borderTopLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
  borderBottomLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
});

// Body fills the remaining vertical space below `MediaViewerBody`'s
// own header. The pane has no separate `PageHeader` strip — the
// viewer body owns its chrome (close button, title, action row) so
// the header sits flush with the rounded TL corner.
export const body = style({
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  minHeight: 0,
  minWidth: 0,
});