"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledChevron = exports.Title = exports.Wrapper = void 0;
const Chevron_1 = require("../../Chevron");
const styled_1 = require("../../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;
};
exports.Wrapper = (0, styled_1.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;
  }
`;
exports.Title = styled_1.styled.span `
  padding: ${({ theme }) => theme.spacing(3, 2, 3, 3)};
`;
exports.StyledChevron = (0, styled_1.styled)(Chevron_1.Chevron) `
  width: 20px;
  height: 20px;
  margin-right: ${({ theme }) => theme.spacing(3)};
`;
