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

// Right-side profile pane sized like the members drawer family —
// wide enough for the identity card + chips without dominating the
// chat. Clamp keeps it readable on narrow desktops and prevents
// runaway width on ultra-wide displays.
//
// Left edge is rounded (TL + BL) to mirror the chat column's TR / BR
// carves across the 12px horseshoe void gap rendered by Room.tsx —
// same design language as the page-nav <-> chat split. `overflow:
// hidden` keeps the rounded corners clean against the header /
// scroll content; the void colour beneath is painted by the parent
// flex row, not by the panel itself.
export const panel = style({
  flexShrink: 0,
  width: `clamp(${toRem(300)}, 25%, ${toRem(380)})`,
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: color.Surface.Container,
  minHeight: 0,
  overflow: 'hidden',
  borderTopLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
  borderBottomLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
});

// Match the chat header's left gutter (RoomViewHeaderDm uses S200
// override) so the title sits at the same x-offset as the chat
// header's avatar — keeps the two rows visually balanced.
export const header = style({
  paddingLeft: config.space.S300,
});

// Functional overflow without a visible scrollbar. The pane's
// content (hero + info rows + actions) almost always fits, but
// moderation alerts can push past — we keep scrolling working for
// that case while hiding the scrollbar chrome that the user asked
// us to drop.
export const scrollWrap = style({
  flex: 1,
  minHeight: 0,
  overflow: 'auto',
  scrollbarWidth: 'none',
  selectors: {
    '&::-webkit-scrollbar': {
      display: 'none',
    },
  },
});