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`,
});

// 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,
});