import { jsx as l } from "react/jsx-runtime";
import { useState as s, useMemo as c, useEffect as p } from "react";
const u = `
  .sl-hide-on-modal {
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: none;
  }
`, m = ({
  containerId: o = "SlLayoutContainer",
  url: e
}) => `
  #${o || "SlLayoutContainer"},
  #${o || "SlLayoutContainer"} .StreamLayerSDK>.StreamLayerSDKTheme > * {
    --color-sdk-container-bg: transparent !important;
  }

  #${o || "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: ${e} !important;
    z-index: 0;

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

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

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

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