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

export const styles = {
  root: {
    '.Mui-disabled .MuiAccordionSummary-expandIconWrapper': {
      display: 'none',
    },
    '.widget-wrapper-actions > *': {
      opacity: 1,
      transition: ({ transitions }) =>
        transitions.create('opacity', {
          duration: transitions.duration.standard,
          easing: transitions.easing.easeInOut,
        }),

      '@media (hover: hover)': {
        opacity: 0,
      },

      '&:has(.active)': {
        opacity: 1,
      },
    },
    '&:hover': {
      '& .widget-wrapper-actions > *': {
        opacity: 1,
      },
    },

    '&.collapsed .widget-wrapper-actions > *': {
      opacity: 0,
      pointerEvents: 'none',

      '&:has(.active)': {
        opacity: 1,
      },
    },
  },
  summary: {
    minHeight: ({ spacing }) => spacing(7),
    '& .MuiAccordionSummary-content': {
      gap: ({ spacing }) => spacing(0.5),
      paddingInlineEnd: ({ spacing }) => spacing(0.75),
    },
  },
  loading: {
    height: ({ spacing }) => spacing(0.35),
    left: 0,
    position: 'absolute',
    top: 0,
    width: '100%',
    zIndex: 1,
  },
  title: {
    wrapper: {
      flexGrow: 1,
      flexShrink: 1,
      minWidth: 0,
      display: 'flex',
      justifyContent: 'center',
      flexDirection: 'column',
    },
    container: {
      display: 'flex',
      alignItems: 'center',
      flexGrow: 1,
      minHeight: ({ spacing }) => spacing(3),
    },
    text: {
      wordBreak: 'break-word',
      overflow: 'hidden',
      display: '-webkit-box',
      WebkitLineClamp: 2,
      WebkitBoxOrient: 'vertical',
    },
  },
  actions: {
    display: 'flex',
    gap: ({ spacing }) => spacing(0.5),
    alignItems: 'center',
    flexShrink: 0,
    justifyContent: 'flex-end',
    '& > div': {
      pointerEvents: 'auto',
    },
  },
  options: {
    trigger: {
      pointerEvents: 'auto',
    },
  },
  detail: {
    display: 'flex',
    flexDirection: 'column',
    gap: ({ spacing }) => spacing(1),
    paddingTop: ({ spacing }) => spacing(0.5),
  },
} satisfies Record<string, SxProps<Theme>>