"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ModalWrap = void 0;
var _styled = _interopRequireDefault(require("@modern-js/runtime/styled"));
let _ = t => t,
  _t;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const ModalWrap = _styled.default.div(_t || (_t = _`
  .modalContainer {
    width: 400px;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%),
      0 9px 28px 8px rgb(0 0 0 / 5%);
    pointer-events: auto;
    padding: 20px 24px;
  }
  .maskContainer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: ${0};
    background: ${0};
    opacity: ${0};
    transition: opacity 0.15s;
  }

  .childrenContainer {
    max-width: 100%;
    max-height: 100%;
    opacity: ${0};
    transition: all 0.3s;
    transform: ${0};
  }

  .headerContainer {
    align-items: center;
    justify-content: flex-end;
    display: flex;
    margin: -5px;
  }

  .footerContainer {
    align-items: center;
    justify-content: flex-end;
    display: flex;
    padding: 5px;
  }
`), props => props.visible ? 'visible' : 'hidden', props => props.mask ? 'rgba(1, 1, 1, 0.6)' : 'rgba(0, 0, 0, 0)', props => props.visible ? '1' : '0', props => props.visible ? '1' : '0', props => props.visible ? 'scale(1)' : 'scale(0.3)');
exports.ModalWrap = ModalWrap;