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

// Right-side members pane for desktop / tablet. Sized like the profile
// side panel — wide enough for the grouped role list but not so wide
// it eats the chat column. TL + BL corners carved through the 12 px
// horseshoe void gap rendered by `Room.tsx`, mirroring
// `RoomViewProfileSidePanel`.
export const panel = style({
  flexShrink: 0,
  width: `clamp(${toRem(260)}, 22%, ${toRem(340)})`,
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: color.Surface.Container,
  minHeight: 0,
  overflow: 'hidden',
  borderTopLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
  borderBottomLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
});

// Header rule lines up with the chat header's bottom border via the
// shared `PageHeader` chrome the host injects — same idiom as the
// profile side panel.
export const header = style({
  paddingLeft: config.space.S300,
});

// Scroll container — `MembersList` renders its hero + grouped list
// flat, so this is the one element that owns vertical overflow on
// desktop. Scrollbar chrome is suppressed to match the rest of the
// Vojo right-pane surfaces (profile + media).
export const body = style({
  flex: 1,
  minHeight: 0,
  display: 'flex',
  flexDirection: 'column',
  overflowY: 'auto',
  scrollbarWidth: 'none',
  selectors: {
    '&::-webkit-scrollbar': {
      display: 'none',
    },
  },
});
