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

export const styles = {
  root: {
    position: 'relative',
    width: '100%',
    minWidth: 0,
    bgcolor: 'background.paper',
    borderRadius: 1,
    overflow: 'hidden',
    boxShadow: 'none',
    // MUI Accordion ships its own collapsed-state divider rules; clear them
    // so they don't fight our card border.
    '&::before': { display: 'none' },

    // Hover-fade actions (v1 parity). Direct children of
    // `.widget-wrapper-actions` are dimmed by default on fine-pointer devices
    // and fade in on hover; an action carrying the `.active` class stays
    // full-opacity even outside hover. Coarse-pointer devices show actions
    // always.
    //
    // The class must sit on the action element itself
    // (`<IconButton className='active'>`). v2 does NOT wrap each action in
    // an extra container the way v1 does, so the `> *` selector lands on the
    // action button directly — `&:has(.active)` would only match if the
    // class were on a descendant, which is never the case here.
    '& .widget-wrapper-actions > *': {
      opacity: 1,
      transition: ({ transitions }: Theme) =>
        transitions.create('opacity', {
          duration: transitions.duration.standard,
          easing: transitions.easing.easeInOut,
        }),
      '@media (hover: hover)': {
        opacity: 0,
      },
      '&.active': {
        opacity: 1,
      },
    },
    '&:hover .widget-wrapper-actions > *': {
      opacity: 1,
    },
    '&[data-collapsed="true"] .widget-wrapper-actions > *': {
      opacity: 0,
      pointerEvents: 'none',
      '&.active': {
        opacity: 1,
      },
    },
  },
  loading: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: ({ spacing }: Theme) => spacing(0.35),
    zIndex: 1,
  },
  summary: {
    minHeight: ({ spacing }: Theme) => spacing(7),
    '& .MuiAccordionSummary-content': {
      gap: ({ spacing }: Theme) => spacing(0.5),
      paddingInlineEnd: ({ spacing }: Theme) => spacing(0.75),
      alignItems: 'center',
    },
  },
  // Disabled state — only the collapse toggle is inert (enforced by the
  // guarded `onChange` handler, not `pointer-events`). Actions and Options in
  // the summary row, and the details panel, all keep their events. We just
  // drop the toggle affordance: hide the chevron (handled in the component)
  // and clear the pointer cursor. MUI's AccordionSummary sets
  // `cursor: pointer` via `&:hover:not(.Mui-disabled)` — a two-class selector
  // that outranks a plain `cursor` rule — so we override at matching
  // specificity. Action/Option buttons restore their own pointer cursor.
  summaryDisabled: {
    '&, &:hover:not(.Mui-disabled)': {
      cursor: 'default',
    },
  },
  titleCell: {
    flexGrow: 1,
    flexShrink: 1,
    minWidth: 0,
    display: 'flex',
    alignItems: 'center',
    minHeight: ({ spacing }: Theme) => spacing(3),
  },
  titleText: {
    minWidth: 0,
    wordBreak: 'break-word',
    overflow: 'hidden',
    display: '-webkit-box',
    WebkitLineClamp: 2,
    WebkitBoxOrient: 'vertical',
  },
  actions: {
    display: 'flex',
    alignItems: 'center',
    gap: 0.5,
    justifyContent: 'flex-end',
    flexShrink: 0,
    '& > *': {
      pointerEvents: 'auto',
    },
  },
  options: {
    display: 'flex',
    alignItems: 'center',
    gap: 0.5,
    flexShrink: 0,
  },
  detail: {
    display: 'flex',
    flexDirection: 'column',
    gap: ({ spacing }: Theme) => spacing(1),
    paddingTop: ({ spacing }: Theme) => spacing(0.5),
  },
  content: {
    minWidth: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 1,
  },
  footer: {
    pt: 1,
  },
} satisfies Record<string, SxProps<Theme>>