import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject;
import styled from '@modern-js/runtime/styled';
export var ModalWrap = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .modalContainer {\n    width: 400px;\n    background-color: #fff;\n    background-clip: padding-box;\n    border: 0;\n    border-radius: 8px;\n    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%),\n      0 9px 28px 8px rgb(0 0 0 / 5%);\n    pointer-events: auto;\n    padding: 20px 24px;\n  }\n  .maskContainer {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 10000;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: ", ";\n    background: ", ";\n    opacity: ", ";\n    transition: opacity 0.15s;\n  }\n\n  .childrenContainer {\n    max-width: 100%;\n    max-height: 100%;\n    opacity: ", ";\n    transition: all 0.3s;\n    transform: ", ";\n  }\n\n  .headerContainer {\n    align-items: center;\n    justify-content: flex-end;\n    display: flex;\n    margin: -5px;\n  }\n\n  .footerContainer {\n    align-items: center;\n    justify-content: flex-end;\n    display: flex;\n    padding: 5px;\n  }\n"])), function (props) {
  return props.visible ? 'visible' : 'hidden';
}, function (props) {
  return props.mask ? 'rgba(1, 1, 1, 0.6)' : 'rgba(0, 0, 0, 0)';
}, function (props) {
  return props.visible ? '1' : '0';
}, function (props) {
  return props.visible ? '1' : '0';
}, function (props) {
  return props.visible ? 'scale(1)' : 'scale(0.3)';
});