import type { SxProps, Theme } from '@mui/material'

// Figma "Menu" (node 6962-12862): 232px paper, sticky caption header with a
// hairline below, caption-medium group subtitles, 32px items (12px left / 8px
// right inset) with an 18px eye, and 8px-padded dividers between sections.
export const styles = {
  // Tooltip wrapper around the (possibly disabled) trigger button. A plain
  // inline span would be sized by the line box and end up taller than the
  // button inside.
  triggerWrap: {
    display: 'inline-flex',
  },
  paper: {
    width: 240,
    maxHeight: 320,
    // List padding is disabled (flush sticky header); keep a small bottom
    // inset so the last 32px item doesn't touch the paper edge.
    paddingBottom: 0.5,
  },
  stickyHeader: {
    position: 'sticky',
    top: 0,
    zIndex: 1,
    backgroundColor: 'background.paper',
    padding: 1,
    marginBlockEnd: 1,
    lineHeight: '16px',
    borderBottom: '1px solid',
    borderColor: 'divider',
  },
  groupCaption: {
    display: 'block',
    padding: ({ spacing }) => spacing(0.5, 1.5),
  },
  // The whole item is the hide action (keyboard-friendly); the eye is its
  // visual affordance.
  item: {
    minHeight: 32,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 1,
    padding: ({ spacing }) => spacing(0, 1, 0, 1.5),
  },
  itemName: {
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  },
  // Design's 18px glyph — decorative (the item itself is the action).
  eye: {
    fontSize: 18,
    color: 'action.active',
    flexShrink: 0,
  },
  divider: {
    marginY: 1,
  },
} satisfies Record<string, SxProps<Theme>>