import{a as e,r as v,R as y,_ as k,u as s,j as b,F as E,b as $}from"./index.js";import{i as o,C as L,A as S,a as N,b as n}from"./animate.es.js";import{s as P}from"./styled-components.browser.esm.js";import{u as O}from"./useBlockScroll.js";import{u as R}from"./useWindowSize.js";function C(){return e(z,{className:"cevoid-backdrop",children:e("div",{className:"cevoid-backdrop-inner"})})}const z=P.div`
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999997;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  pointer-events: none;

  .cevoid-backdrop-inner {
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;

    ${o.greaterThan("medium")`
      opacity: var(--cevoid-backdrop-opacity);
      background-color: var(--cevoid-backdrop-color);
    `}
  }
`,A=(i,r,c,p)=>{v.exports.useEffect(()=>{const l=d=>{i.current&&!i.current.contains(d.target)&&c.current&&!c.current.contains(d.target)&&p.current&&!p.current.contains(d.target)&&r()};return document.addEventListener("mouseup",l),()=>{document.removeEventListener("mouseup",l)}},[i])},j=y.lazy(()=>k(()=>import("./DesktopPopup.js"),["DesktopPopup.js","index.js","Products.js","animate.es.js","styled-components.browser.esm.js","User.js","translationUtils.js","Loader.js","useWindowSize.js"])),M=y.lazy(()=>k(()=>import("./Popup.js"),["Popup.js","index.js","styled-components.browser.esm.js","Products.js","animate.es.js","User.js","translationUtils.js","Loader.js","useWindowSize.js","Image.js","App.js","Video.js","react-masonry-css.module.js"])),I=({closeModal:i,prevPopupSlide:r,nextPopupSlide:c,children:p})=>{const[l,d]=O();return v.exports.useEffect(()=>{const h=a=>{a.keyCode===27&&i()},m=a=>{a.keyCode===37&&r()},u=a=>{a.keyCode===39&&c()};return window.addEventListener("keydown",h),window.addEventListener("keydown",m),window.addEventListener("keydown",u),()=>{window.removeEventListener("keydown",h),window.removeEventListener("keydown",m),window.removeEventListener("keydown",u)}},[i]),v.exports.useEffect(()=>(n(".cevoid-desktop-modal",{opacity:1,transform:"translate3d(-50%, -50%, 0px)"},{duration:.3,easing:[.65,0,.35,1]}),n(".cevoid-mobile-modal",{opacity:1,transform:"scale(1) perspective(1px)"},{duration:.3,easing:[.65,0,.35,1]}),n(".cevoid-close-button",{opacity:1,transform:"scale(1) perspective(1px)"},{duration:.3,easing:[.65,0,.35,1],delay:.1}),n(".cevoid-next-button, .cevoid-prev-button",{opacity:1,transform:"translateY(-50%) scale(1) perspective(1px)"},{duration:.3,easing:[.65,0,.35,1],delay:.1}),n(".cevoid-backdrop",{opacity:1},{duration:.3,easing:"ease-out"}),l(),()=>{d()}),[]),e(E,{children:p})},W=()=>{var w;const i=s(t=>t.posts),r=s(t=>t.modalOpen),c=s(t=>t.setModalOpen),p=s(t=>t.setPopupPost),l=s(t=>t.setHasInteractedOnce),d=s(t=>t.prevSlide),h=s(t=>t.nextSlide),m=v.exports.useRef(null),u=v.exports.useRef(null),a=v.exports.useRef(null),{device:T}=R(),x=()=>{n(".cevoid-desktop-modal",{opacity:0,transform:"translate3d(-50%, -50%, 0px)"},{duration:.2,easing:[.65,0,.35,1]}),n(".cevoid-mobile-modal",{opacity:0,transform:"scale(0.95)"},{duration:.2,easing:[.65,0,.35,1]}),n(".cevoid-close-button",{opacity:0,transform:"scale(0.8)"},{duration:.2,easing:[.65,0,.35,1]}),n(".cevoid-next-button, .cevoid-prev-button",{opacity:0,transform:"translateY(-50%) scale(0.8)"},{duration:.2,easing:[.65,0,.35,1]}),n(".cevoid-backdrop",{opacity:0},{duration:.2,easing:"ease-in"}).finished.then(()=>{c(!1),p(void 0),l(!0)})},f=()=>{d()},g=()=>{h()};A(a,x,m,u);const _=b(Y,{className:`${r?"cevoid-has-content":""} ${((w=i==null?void 0:i.nodes)==null?void 0:w.length)>1?"multiple-slides":"single-slide"}`,children:[r&&e("div",{className:"cevoid-modal-blur",children:e("div",{className:"cevoid-modal-content",children:e(I,{closeModal:x,prevPopupSlide:f,nextPopupSlide:g,children:T==="desktop"?e("div",{className:"cevoid-desktop-modal",ref:a,children:e(j,{})}):e("div",{className:"cevoid-mobile-modal",ref:a,children:e(M,{})})})})}),r&&b(E,{children:[e("div",{className:"cevoid-close-button",children:e("div",{className:"cevoid-close-button-inner",children:e(L,{})})}),e("div",{className:"cevoid-nav-button cevoid-prev-button",ref:m,onClick:()=>f(),children:e(S,{})}),e("div",{className:"cevoid-nav-button cevoid-next-button",ref:u,onClick:()=>g(),children:e(N,{})}),e(C,{})]})]});return typeof window!="undefined"&&r?$.createPortal(_,document.getElementById("cevoid-modal-portal")):null},Y=P.div`
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999998;
  pointer-events: none;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;

  .cevoid-modal-blur {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    overflow: hidden;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
  }

  &.cevoid-has-content {
    pointer-events: all;
  }

  .cevoid-nav-button {
    cursor: pointer;
    background: #fff;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    z-index: 9999999;
    box-shadow: 4px 0px 20px -2px rgb(0 0 0 / 10%);
    transform: translateY(-50%) scale(0.8);
    opacity: 0;

    ${o.greaterThan("medium")`
      height: 44px;
      width: 44px;
    `}

    svg {
      color: #000;
      height: 18px;
      width: 18px;
      fill: none;

      ${o.greaterThan("medium")`
        height: 24px;
        width: 24px;
    `}
    }

    &:hover {
      transform: translateY(-50%) scale(1.05) !important;
    }

    &:active {
      transform: translateY(-50%) scale(0.95) !important;
    }
  }

  .cevoid-prev-button {
    top: 50%;
    left: var(--cevoid-spacing-md);
    display: none;

    ${o.greaterThan("medium")`
      position: fixed;
      display: flex;
    `}
  }

  .cevoid-next-button {
    top: 50%;
    right: var(--cevoid-spacing-md);
    display: none;

    ${o.greaterThan("medium")`
      position: fixed;
      display: flex;
    `}
  }

  &.single-slide {
    .cevoid-nav-button {
      display: none !important;
    }
  }

  .cevoid-close-button {
    position: absolute;
    cursor: pointer;
    height: 50px;
    width: 50px;
    z-index: 9999999;
    transform: scale(0.8);
    opacity: 0;
    top: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;

    ${o.greaterThan("medium")`
      position: fixed;
      left: unset;
      height: 44px;
      width: 44px;
      right: var(--cevoid-spacing-md);
      top: var(--cevoid-spacing-md);
    `}

    .cevoid-close-button-inner {
      box-shadow: 4px 0px 20px -2px rgb(0 0 0 / 10%);
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      height: 36px;
      width: 36px;

      ${o.greaterThan("medium")`
        height: 44px;
        width: 44px;
      `}

      svg {
        color: #000;
        height: 18px;
        width: 18px;

        ${o.greaterThan("medium")`
          height: 24px;
          width: 24px;
      `}
      }
    }

    &:hover {
      transform: scale(1.05) !important;
    }

    &:active {
      transform: scale(0.95) !important;
    }
  }

  .cevoid-modal-content {
    z-index: 9999999;
    position: absolute;
    transform: translateX(-50%);
    opacity: 1;
    left: 50%;
    overflow: hidden;
    max-width: 100%;

    ${o.greaterThan("medium")`
      position: relative;
      height: 100vh;
      width: 100vw;
      overflow: auto;
      max-height: 100%;
    `}

    ${o.greaterThan("large")`
      overflow: hidden;
    `}

    .cevoid-desktop-modal {
      position: absolute;
      top: 50%;
      left: 50%;
      max-width: calc(100vw - 212px);
      transform: translate3d(-50%, -50%, 0px);
      opacity: 0;
      box-shadow: 0px 4px 30px -2px rgb(0 0 0 / 15%);
    }

    .cevoid-mobile-modal {
      position: relative;
      width: 100vw;
      background: #fff;
      transform: scale(0.95);
      opacity: 0;
      transform-origin: top center;
      overflow: hidden;

      ${o.greaterThan("medium")`
        width: 75vh;
        margin: 2.5vh auto 5vh;
        max-width: 768px;
        border-radius: var(--cevoid-corner-roundness);
        box-shadow: 0px 4px 30px -2px rgb(0 0 0 / 15%);
      `}
    }
  }
`;export{Y as Modal,W as default};