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

// ===========================================================================
// Room overflow (⋮) menu — the anchored folds PopOut on both desktop and
// mobile. Flat transparent rows on the popout's deep Vojo input-field tone
// (Surface.Container #0d0e11 — the chat composer fill, set via the Menu's
// `variant="Surface"` in RoomActionsMenu), separated by single 1px hairlines.
// Single accent: violet on Invite, brick on Leave, green on the e2ee chip.
// ===========================================================================

// Subtle Fleet hairline between row groups, inset from the edges.
export const SectionLine = style({
  height: toRem(1),
  flexShrink: 0,
  backgroundColor: color.Surface.ContainerLine,
  margin: `${toRem(4)} ${config.space.S200}`,
});

// The flat action row. Reset <button>; hover/active tones lift off the
// #181a20 popout surface; accent colour (Invite/Leave) is applied inline.
export const ActionRow = style({
  width: '100%',
  minHeight: toRem(44),
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S300,
  padding: `0 ${config.space.S300}`,
  borderRadius: toRem(10),
  background: 'transparent',
  border: 'none',
  textAlign: 'left',
  font: 'inherit',
  color: color.Surface.OnContainer,
  cursor: 'pointer',
  selectors: {
    '&:hover:not(:disabled)': { backgroundColor: color.Surface.ContainerHover },
    '&:active:not(:disabled)': { backgroundColor: color.Surface.ContainerActive },
    '&:disabled': {
      cursor: 'default',
      opacity: config.opacity.P300,
    },
    '&:focus-visible': {
      outline: `${toRem(2)} solid ${color.Primary.Main}`,
      outlineOffset: toRem(-2),
    },
  },
});

// Fixed leading-icon slot — keeps every label hard-aligned. `currentColor`,
// so accent rows tint the icon through the row's inline colour.
export const ActionRowIcon = style({
  flexShrink: 0,
  width: toRem(20),
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
});

export const ActionRowLabel = style({
  flexGrow: 1,
  minWidth: 0,
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
});

// Trailing cluster (mode word / badge / chevron).
export const ActionRowTrailing = style({
  flexShrink: 0,
  display: 'inline-flex',
  alignItems: 'center',
  gap: config.space.S100,
});

export const ActionRowTrailingText = style({
  color: color.Surface.OnContainer,
  opacity: config.opacity.P400,
});

export const ActionRowChevron = style({
  color: color.Surface.OnContainer,
  opacity: config.opacity.P300,
});

// Popout container: width bump from the legacy 220px so the Notifications
// mode word + Pinned badge breathe; softer mobile corner radius overriding
// the folds Menu default. Background/border/shadow come from the folds Menu
// `variant="Surface"` in RoomActionsMenu.
export const PopoutMenu = style({
  width: toRem(280),
  maxWidth: '100vw',
  borderRadius: toRem(16),
  overflow: 'hidden',
});

export const PopoutGroup = style({
  display: 'flex',
  flexDirection: 'column',
  padding: config.space.S200,
  gap: toRem(1),
});
