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

export const CategoryButton = style({
  flexGrow: 1,
});
export const CategoryButtonIcon = style({
  opacity: config.opacity.P400,
});

// Avatar is 48px with symmetric 10px breathing room top/bottom — minimum
// row height clears avatar + padding so the circle never clips against
// the row's selected/hover background.
const DmRowMinHeight = toRem(68);
const DmRowTitleBlockHeight = toRem(40);

export const DmRowOuter = style({
  minHeight: DmRowMinHeight,
  boxSizing: 'border-box',
});

export const DmRowInner = style({
  minHeight: DmRowMinHeight,
  boxSizing: 'border-box',
  padding: `${toRem(10)} 0`,
});

// Positioning context for the peer online dot — inline-flex so the wrapper
// hugs the 48px avatar and the absolutely-positioned dot anchors to its
// bottom-right corner.
export const DmRowAvatar = style({
  position: 'relative',
  display: 'inline-flex',
  flexShrink: 0,
});

// Peer online indicator — green dot inset at the avatar's bottom-right. Mirrors
// the profile-card `HeroOnlineDot` (user-profile/styles.css.ts): same
// `Success.Main` fill and a ring in `Background.Container` — which is exactly
// what the `NavItem variant="Background"` row paints at rest, so the dot punches
// out against the avatar circle. Sized for the smaller 48px list avatar (the
// profile card's 16px would read oversized here): the design bundle's
// `size * 0.28` ≈ 14px, scaled down 1.2× to ~11.7px so it sits quieter.
export const DmRowOnlineDot = style({
  position: 'absolute',
  right: 0,
  bottom: 0,
  width: toRem(14 / 1.2),
  height: toRem(14 / 1.2),
  borderRadius: '50%',
  backgroundColor: color.Success.Main,
  boxShadow: `0 0 0 ${toRem(2.5)} ${color.Background.Container}`,
});

// Locks the title block to its natural 2-line height so the name does
// not jump vertically when the second row's content (preview / unread
// badge / notification icon) collapses to 0px on hover. Bridged rooms
// with no m.room.message yet but a synced unread badge are the obvious
// trigger; the same pathology applies to any (empty preview + has unread)
// pair, so the fix is room-class-agnostic.
export const DmRowText = style({
  minWidth: 0,
  overflow: 'hidden',
  minHeight: DmRowTitleBlockHeight,
});

export const DmRowTextStretch = style({
  minWidth: 0,
  overflow: 'hidden',
});

export const DmRowName = style({
  fontWeight: 600,
});

export const DmRowTime = style({
  fontFamily: '"JetBrains Mono Variable", ui-monospace, monospace',
  fontSize: toRem(10.5),
  color: color.Surface.OnContainer,
  opacity: 0.55,
  fontVariantNumeric: 'tabular-nums',
  flexShrink: 0,
  whiteSpace: 'nowrap',
});

export const DmRowPreview = style({
  opacity: 0.6,
});

export const DmRowPreviewUnread = style({
  opacity: 0.85,
  fontWeight: 500,
});
