import { css, styled } from '../styled';
import { Typography } from '../Typography';
const calcMarginStyles = (theme, gutterBottom) => {
    if (typeof gutterBottom === 'boolean') {
        // Если gutterBottom явно имеет значение true, то сохраняем отступ и у последнего элемента
        // для этого повышаем приоритет свойства
        if (gutterBottom) {
            return css `
        margin-bottom: ${theme.spacing(8)} !important;

        ${theme.breakpoints.down('sm')} {
          margin-bottom: ${theme.spacing(4)} !important;
        }
      `;
        }
        return css `
      margin-bottom: ${theme.spacing(0)};
    `;
    }
    return css `
    margin-bottom: ${theme.spacing(8)};

    ${theme.breakpoints.down('sm')} {
      margin-bottom: ${theme.spacing(4)};
    }
  `;
};
export const Wrapper = styled('fieldset', {
    shouldForwardProp: (prop) => !['$gutterBottom'].includes(prop),
}) `
  position: relative;

  margin-inline: 0;
  padding: 0;

  border: 0;

  ${({ $gutterBottom, theme }) => calcMarginStyles(theme, $gutterBottom)}

  &:last-of-type {
    margin-bottom: 0;
  }
`;
export const Title = styled(Typography) `
  display: flex;
  gap: ${({ theme }) => theme.spacing(4)};
  align-items: baseline;
  justify-content: space-between;

  margin-bottom: ${({ theme }) => theme.spacing(4)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: block;

    margin-bottom: ${({ theme }) => theme.spacing(5)};
  }
`;
export const Description = styled(Typography) `
  margin-bottom: ${({ theme }) => theme.spacing(4)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-bottom: ${({ theme }) => theme.spacing(5)};
  }
`;
export const TitleAddon = styled.div `
  flex-shrink: 0;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-top: ${({ theme }) => theme.spacing(5)};
  }
`;
export const Backdrop = styled.div `
  position: absolute;
  z-index: ${({ theme }) => theme.zIndex.tooltip};
  inset: 0;

  opacity: 0.5;
  background-color: ${({ theme }) => theme.palette.background.element};
`;
