import { Warning } from '@procore/core-icons';
import styled, { css } from 'styled-components';
import { Card } from '../Card/Card';
import { StyledSection, StyledSectionInner } from '../Section/Section.styles';
import { Typography } from '../Typography/Typography';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
export var fadeInClassName = 'fade-in';
export var fadeOutClassName = 'fade-out';
export var modalMaxWidth = '640px';
export var modalPixelGutter = spacing.xl;
export var modalPixelWidths = {
  sm: 432,
  md: 688,
  lg: 1152,
  xl: 1920
};
export var StyledModal = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledModal",
  componentId: "core-11_26_2__sc-1ijdug2-0"
})(["display:flex;height:100vh;position:absolute;opacity:0;transition:0.3s opacity ease;width:100vw;z-index:0;&.", "{opacity:1;}&.", "{opacity:0;}"], fadeInClassName, fadeOutClassName);
export var StyledModalButtons = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledModalButtons",
  componentId: "core-11_26_2__sc-1ijdug2-1"
})(["display:flex;flex:0 0 auto;margin-left:", "px;> * + *{margin-left:", "px;}"], spacing.lg, spacing.sm);
export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
  displayName: "StyledModalContainer",
  componentId: "core-11_26_2__sc-1ijdug2-2"
})(["display:flex;flex-direction:row;position:absolute;z-index:2;", " ", ""], function (_ref) {
  var $placement = _ref.$placement;
  if ($placement === 'top') {
    return css(["top:5vh;"]);
  }
  return css(["top:50vh;transform:translateY(-50%);"]);
}, function (_ref2) {
  var $width = _ref2.$width,
    $placement = _ref2.$placement;
  if ($width) {
    return css(["left:", "px;right:", "px;margin-left:auto;margin-right:auto;max-width:", "px;", "{max-width:none;}"], modalPixelGutter, modalPixelGutter, modalPixelWidths[$width], StyledModalBody);
  }
  // TODO deprecated, uses new centering, required width
  return css(["left:50vw;transform:translateX(-50%) ", ";"], $placement === 'center' && 'translateY(-50%)');
});
export var StyledModalFooter = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledModalFooter",
  componentId: "core-11_26_2__sc-1ijdug2-3"
})(["align-items:center;display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;padding:", "px ", "px ", "px;"], spacing.xl, spacing.xxl, spacing.xxl);
export var StyledModalBody = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledModalBody",
  componentId: "core-11_26_2__sc-1ijdug2-4"
})(["", " box-sizing:border-box;color:", ";display:flex;flex-direction:column;max-width:", ";overflow:auto;", " > ", "{padding-left:0;padding-right:0;&:first-child > ", "{padding-top:0;}}", ""], getTypographyIntent('body'), colors.gray15, modalMaxWidth, function (_ref3) {
  var noSideSpacing = _ref3.noSideSpacing;
  return css(["padding:", "px ", "px;"], spacing.xl, noSideSpacing ? 0 : spacing.xxl);
}, StyledSection, StyledSectionInner, function (_ref4) {
  var isOverflowingY = _ref4.isOverflowingY;
  return isOverflowingY && css(["& + ", "{border-top-width:1px;border-top-style:solid;border-top-color:", ";", "{border-top:none;}}"], StyledModalFooter, colors.gray85, StyledModalFooterSummary);
});
export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledModalContent",
  componentId: "core-11_26_2__sc-1ijdug2-5"
})(["display:flex;flex-direction:column;max-height:90vh;overflow:hidden;width:100%;"]);
export var StyledModalFooterNotation = /*#__PURE__*/styled(Typography).withConfig({
  displayName: "StyledModalFooterNotation",
  componentId: "core-11_26_2__sc-1ijdug2-6"
})(["flex-grow:1;"]);
export var StyledModalHeader = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledModalHeader",
  componentId: "core-11_26_2__sc-1ijdug2-7"
})(["align-items:flex-start;color:", ";display:flex;flex:0 0 auto;padding:", "px ", "px;position:relative;", ""], colors.gray10, spacing.xl, spacing.xxl, function (_ref5) {
  var $isBodyScrolled = _ref5.$isBodyScrolled;
  return css(["border-bottom:1px solid ", ";"], $isBodyScrolled ? colors.gray85 : 'transparent');
});
export var StyledModalHeading = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledModalHeading",
  componentId: "core-11_26_2__sc-1ijdug2-8"
})(["", " align-items:center;display:flex;flex:1 1 auto;min-height:36px;padding-right:", "px;"], getTypographyIntent('h2'), spacing.lg);
export var StyledModalCancel = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledModalCancel",
  componentId: "core-11_26_2__sc-1ijdug2-9"
})(["flex:0 0 auto;"]);
export var StyledModalScrim = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledModalScrim",
  componentId: "core-11_26_2__sc-1ijdug2-10"
})(["background:hsla(200,8%,10%,0.6);height:100vh;left:0;position:absolute;top:0;width:100vw;z-index:1;"]);
export var StyledModalWarningIcon = /*#__PURE__*/styled(Warning).withConfig({
  displayName: "StyledModalWarningIcon",
  componentId: "core-11_26_2__sc-1ijdug2-11"
})(["color:", ";margin-right:", "px;"], colors.yellow40, spacing.sm);
export var StyledModalFooterSummary = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledModalFooterSummary",
  componentId: "core-11_26_2__sc-1ijdug2-12"
})(["", " border-top:1px solid ", ";border-bottom:1px solid ", ";padding:", "px ", "px;color:", ";font-style:italic;background-color:", ";margin:-", "px -", "px ", "px -", "px;flex:1 1 100%;"], getTypographyIntent('small'), colors.gray85, colors.gray85, spacing.md, spacing.xxl, colors.gray15, colors.gray98, spacing.xl, spacing.xxl, spacing.xl, spacing.xxl);
//# sourceMappingURL=Modal.styles.js.map