import { Chevron } from '../../Chevron';
import { styled } from '../../styled';
const getBackgroundColor = (theme, isDisabled, isSelected) => {
    if (isDisabled) {
        return theme.palette.grey[100];
    }
    if (isSelected) {
        return theme.palette.background.element;
    }
    return theme.palette.background.default;
};
export const Wrapper = styled('summary', {
    shouldForwardProp: (prop) => !['$isDisabled', '$isSelected'].includes(prop),
}) `
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 64px;

  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
  background: ${({ theme, $isDisabled, $isSelected }) => getBackgroundColor(theme, $isDisabled, $isSelected)};

  transition: ${({ theme }) => theme.transitions.create(['background-color'], {
    duration: theme.transitions.duration.standard,
})};

  &:hover {
    background-color: ${({ theme }) => theme.palette.background.elementHover};
  }

  &:focus-visible {
    outline: unset;
  }
`;
export const Title = styled.span `
  padding: ${({ theme }) => theme.spacing(3, 2, 3, 3)};
`;
export const StyledChevron = styled(Chevron) `
  width: 20px;
  height: 20px;
  margin-right: ${({ theme }) => theme.spacing(3)};
`;
