import * as React from 'react';
import { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import MuiAccordion from '@mui/material/Accordion';
import MuiAccordionSummary from '@mui/material/AccordionSummary';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import { jsx as _jsx } from "react/jsx-runtime";
const Accordion = styled(props => /*#__PURE__*/_jsx(MuiAccordion, {
  disableGutters: true,
  elevation: 0,
  square: true,
  ...props
}))(({
  theme
}) => ({
  border: `1px solid ${theme.palette.divider}`,
  '&:not(:last-child)': {
    borderBottom: 0
  },
  '&::before': {
    display: 'none'
  }
}));
const AccordionSummary = styled(props => /*#__PURE__*/_jsx(MuiAccordionSummary, {
  expandIcon: /*#__PURE__*/_jsx(ArrowForwardIosSharpIcon, {
    sx: {
      fontSize: '0.9rem'
    }
  }),
  ...props
}))(({
  theme
}) => ({
  backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, .05)' : 'rgba(0, 0, 0, .03)',
  flexDirection: 'row-reverse',
  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
    transform: 'rotate(90deg)'
  },
  '& .MuiAccordionSummary-content': {
    marginLeft: theme.spacing(1)
  }
}));
const AccordionDetails = styled(MuiAccordionDetails)(({
  theme
}) => ({
  padding: theme.spacing(2),
  borderTop: '1px solid rgba(0, 0, 0, .125)'
}));
export { Accordion, AccordionSummary, AccordionDetails };