"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Title = exports.CloseButton = exports.IconWrapper = exports.Footer = exports.Content = exports.Header = exports.Wrapper = void 0;
const constants_1 = require("../../Button/constants");
const IconButton_1 = require("../../IconButton");
const constants_2 = require("../../SvgIcon/constants");
const styled_1 = require("../../styled");
const Typography_1 = require("../../Typography");
const utils_1 = require("./utils");
exports.Wrapper = styled_1.styled.article `
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: start;

  min-height: 32px;
  padding: ${({ theme }) => theme.spacing(4)};

  color: ${({ theme }) => theme.palette.grey[900]};

  background: ${({ theme }) => theme.palette.background.default};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding: ${({ theme }) => theme.spacing(2, 3)};
  }
`;
exports.Header = styled_1.styled.header `
  display: flex;
  align-items: flex-start;

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

  ${({ theme }) => theme.breakpoints.down('sm')} {
    .${constants_1.buttonClassnames.root} {
      width: 24px;
      height: 24px;
    }
  }
`;
exports.Content = (0, styled_1.styled)(Typography_1.Typography) `
  margin-top: ${({ theme }) => theme.spacing(2)};
  margin-left: ${({ theme }) => theme.spacing(8)};
`;
exports.Footer = styled_1.styled.footer `
  display: flex;
  justify-content: ${({ actionsDirection }) => (0, utils_1.getActionsDirection)(actionsDirection)};

  width: 100%;
  margin-top: ${({ theme }) => theme.spacing(2)};
`;
exports.IconWrapper = styled_1.styled.div `
  display: flex;

  margin-right: ${({ theme }) => theme.spacing(2)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    .${constants_2.svgIconClassnames.root} {
      width: 24px;
      height: 24px;
    }
  }
`;
exports.CloseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
  align-self: center;

  width: 24px;
  height: 24px;
  margin-left: ${({ theme }) => theme.spacing(4)};
  padding: 0;
`;
exports.Title = (0, styled_1.styled)(Typography_1.Typography) `
  flex: 1;
  
  padding-top: 2px;

  font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
`;
