"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Backdrop = exports.TitleAddon = exports.Description = exports.Title = exports.Wrapper = void 0;
const styled_1 = require("../styled");
const Typography_1 = require("../Typography");
const calcMarginStyles = (theme, gutterBottom) => {
    if (typeof gutterBottom === 'boolean') {
        // Если gutterBottom явно имеет значение true, то сохраняем отступ и у последнего элемента
        // для этого повышаем приоритет свойства
        if (gutterBottom) {
            return (0, styled_1.css) `
        margin-bottom: ${theme.spacing(8)} !important;

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

    ${theme.breakpoints.down('sm')} {
      margin-bottom: ${theme.spacing(4)};
    }
  `;
};
exports.Wrapper = (0, styled_1.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;
  }
`;
exports.Title = (0, styled_1.styled)(Typography_1.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)};
  }
`;
exports.Description = (0, styled_1.styled)(Typography_1.Typography) `
  margin-bottom: ${({ theme }) => theme.spacing(4)};

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

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

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