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

export const styles = {
  // Inline shell where the portaled body lives when fullscreen is closed.
  // Real flex-column box (not `display: contents`) so that:
  //   1. when the body is moved into the modal, we can pin a `min-height`
  //      to keep the widget card from collapsing — the inline shell is
  //      empty for that interval, and a layout-less wrapper would make
  //      the card squish a frame before the modal covers it (visible
  //      blink).
  //   2. nested `flex: 1` (e.g. Widget.State's CaptureBox) still grows —
  //      this shell preserves the column-flex inheritance it would have
  //      had directly under `Widget.Content`.
  // `gap: 1` mirrors `Widget.Content`'s gap so the body's siblings
  // (Subheader / capture box / note) keep their spacing.
  inlineSlot: {
    display: 'flex',
    flexDirection: 'column',
    flex: 1,
    minHeight: 0,
    gap: 1,
  },
  trigger: {
    p: 0.5,
    '& .MuiSvgIcon-root': { fontSize: 20 },
  },
  triggerActive: {
    background: (theme: Theme) => theme.palette.primary.relatedLight,
  },
  dialogPaper: {
    width: '90vw',
    height: '90vh',
    maxWidth: 'none',
    maxHeight: 'none',
  },
  dialogTitle: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 1,
    py: 3,
    pr: 3,
    pb: 2,
  },
  titleText: {
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  },
  dialogContent: {
    display: 'flex',
    flexDirection: 'column',
    gap: 1,
    py: 3,
    px: 2.5,
    overflow: 'auto',
  },
} satisfies Record<string, SxProps<Theme>>