"use strict";const d=require("react/jsx-runtime"),r=require("react"),s=`
  .sl-hide-on-modal {
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: none;
  }
`,l=({containerId:n="SlLayoutContainer",url:o})=>`
  #${n||"SlLayoutContainer"},
  #${n||"SlLayoutContainer"} .StreamLayerSDK>.StreamLayerSDKTheme > * {
    --color-sdk-container-bg: transparent !important;
  }

  #${n||"SlLayoutContainer"}::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-image: ${o} !important;
    z-index: 0;

    opacity: 0;
    animation: fade-sl-bg-in 0.3s linear forwards;
  }

  #${n||"SlLayoutContainer"} > div {
    position: relative;
    z-index: 1;
  }

  @keyframes fade-sl-bg-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  ${s}
`,p=({containerId:n,landscapeUrl:o,portraitUrl:a})=>{const[i,c]=r.useState(!1),e=r.useMemo(()=>{const t=window.innerWidth,u=window.innerHeight;return c(!1),t>u?o:a},[o,a]);return r.useEffect(()=>{if(e){const t=new Image;t.src=e,t.onload=function(){c(!0)}}},[e]),r.useMemo(()=>{const t=e?`url("${e}")`:void 0;return t&&i?d.jsx("style",{children:l({containerId:n,url:t})}):null},[n,e,i])};exports.u=s;exports.y=p;
