import styled from "styled-components";
import { MEDIA_TABLET } from "../../theme/default";
import { composeStyle as comp } from "../../util";
export const popupDefaults = {
    mediaTablet: MEDIA_TABLET,
    background: "#00244533",
    closeColor: "#ffffff",
    contentBackground: "#ffffff",
    contentBoxShadow: "4px 4px 14px rgba(179, 189, 199, 0.15)",
    closeRight: "-25px",
    closeTop: "0",
    borderRadius: "4px",
};
export const Wrapper = styled.div(({ theme: { mediaTablet, background, borderRadius, contentBackground, contentBoxShadow, wrapperJustifyContent, wrapperAlignItems, closeRight, closeTop, }, }) => `
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
  display: flex;
  align-items: ${wrapperAlignItems ? wrapperAlignItems : "center"};
  justify-content: ${wrapperJustifyContent ? wrapperJustifyContent : "center"};
  touch-action: none;

  ${comp("background", background)}

  .ui-popup__content {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    ${comp("background", contentBackground)}
    ${comp("box-shadow", contentBoxShadow)}
    ${comp("border-radius", borderRadius)}

    @media (${mediaTablet}) {
      min-width: 90%;
      max-width: 95%;
      touch-action: none;
    }
  }

  .ui-popup__close {
    position: absolute;
    right: ${closeRight};
    top: ${closeTop};
    cursor: pointer;

    @media (${mediaTablet}) {
      right: 10px;
      top: -30px;
    }
  }

`);
//# sourceMappingURL=styled.js.map