/*! For license information please see 1342.f607de3ba20f479f.js.LICENSE.txt */
export const __webpack_ids__=["1342"];export const __webpack_modules__={62249:function(i,e,t){t.d(e,{Z:()=>l});var s=t(8081),r=t.n(s),n=t(23645),o=t.n(n)()(r());o.push([i.id,".visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}",""]);let l=o.toString()},61050:function(i,e,t){i.exports=t.p+"scrim-bg.27f047d7e991dbe9.png"},46374:function(i,e,t){i.exports=t.p+"cancel.7362f2cdf3515e0d.svg"},68342:function(i,e,t){i.exports=t.p+"external-link.4f3a2dc8e402cae5.svg"},65322:function(i,e,t){i.exports=t.p+"fullscreen-enter.452bcbaed6904ec7.svg"},13484:function(i,e,t){i.exports=t.p+"scrim-hexagons.e59318adb5550050.svg"},38864:function(i,e,t){i.exports=t.p+"scrimba-logo.0c5b5b4efd2b23dc.svg"},37142:function(i,e,t){t.r(e),t.d(e,{MDNScrimInline:()=>MDNScrimInline});var s=t(14703),r=t(13566),n=t(68688);let o=(0,s.YP)`<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000" viewBox="0 0 112 112"><circle cx="55.764" cy="55.764" r="41.823"/><path d="M69.011 57.428a2 2 0 0 0 0-3.328L50.903 42.027c-1.33-.886-3.11.067-3.11 1.664v24.145c0 1.598 1.78 2.55 3.11 1.664z"/></svg>`;var l=t(17822);let MDNScrimInline=class MDNScrimInline extends s.oi{static styles=l.Z;static ssr=!1;static properties={url:{type:String},img:{type:String},scrimTitle:{type:String,attribute:"scrimtitle"},_fullscreen:{state:!0},_scrimLoaded:{state:!0}};constructor(){super(),this.url=void 0,this._fullUrl=void 0,this._scrimId=void 0,this.img=void 0,this._imgStyle={},this.scrimTitle=void 0,this._fullscreen=!1,this._scrimLoaded=!1}willUpdate(i){if(i.has("url"))if(this.url){let i=new URL(this.url);i.searchParams.set("via","mdn"),i.searchParams.set("embed",""),this._fullUrl=i.toString(),this._scrimId=i.pathname.slice(1)}else this._fullUrl=void 0,this._scrimId=void 0;i.has("img")&&(this._imgStyle=this.img?{"--scrim-img":`url(${this.img})`}:{})}render(){return this.url&&this._fullUrl?(0,s.dy)`
      <dialog @close=${this.#i} style=${(0,n.V)(this._imgStyle)}>
        <div class="inner">
          <div class="header">
            <span>Clicking will load content from scrimba.com</span>
            <button tabindex="0" @click=${this.#e} class="toggle">
              <div
                class="scrim-fullscreen ${this._fullscreen?"exit":"enter"}"
              ></div>
              <span class="visually-hidden">Toggle fullscreen</span>
            </button>
            <a
              href=${this._fullUrl}
              target="_blank"
              rel="origin noreferrer"
              class="external"
              data-glean="curriculum: scrim link id:${this._scrimId}"
            >
              <div class="scrim-link"></div>
              <span class="visually-hidden">Open on Scrimba</span>
            </a>
          </div>
          <div class="body">
            ${this._scrimLoaded?(0,s.dy)`
                  <iframe
                    src=${this._fullUrl}
                    title=${(0,r.o)(this.scrimTitle)}
                  ></iframe>
                `:(0,s.dy)`
                  ${this.scrimTitle&&!this.img?(0,s.dy)`<div class="background">
                        <div class="background-noise">
                          <svg width="0" height="0">
                            <filter id="noise">
                              <feTurbulence
                                type="fractalNoise"
                                baseFrequency="0.7"
                                numOctaves="4"
                              />
                            </filter>
                          </svg>
                        </div>
                        <h1>${this.scrimTitle}</h1>
                      </div>`:null}
                  <button
                    @click=${this.#t}
                    class="open"
                    data-glean=${`curriculum: scrim engage id:${this._scrimId}`}
                  >
                    ${o}
                    <span class="visually-hidden">
                      "Load scrim and open dialog."
                    </span>
                  </button>
                `}
          </div>
        </div>
      </dialog>
    `:s.Ld}#e(i){i.target instanceof HTMLElement&&(i.target.dataset.glean=`curriculum: scrim fullscreen -> ${+!this._fullscreen} id:${this._scrimId}`),this._fullscreen?this.#s():this.#t()}#t(){let i=this.renderRoot.querySelector("dialog");i&&(i.showModal(),this._scrimLoaded=!0,this._fullscreen=!0)}#s(){let i=this.renderRoot.querySelector("dialog");i?.close()}#i(){this._fullscreen=!1}};customElements.define("mdn-scrim-inline",MDNScrimInline)},13566:function(i,e,t){t.d(e,{o:()=>r});var s=t(32529);let r=i=>i??s.Ld},17822:function(i,e,t){t.d(e,{Z:()=>$});var s=t(14703),r=t(8081),n=t.n(r),o=t(23645),l=t.n(o),a=t(62249),c=t(61667),d=t.n(c),m=new t.U(t(65322)),u=new t.U(t(46374)),g=new t.U(t(68342)),h=new t.U(t(38864)),p=new t.U(t(13484)),f=new t.U(t(61050)),b=l()(n());b.i(a.Z);var v=d()(m),k=d()(u),w=d()(g),_=d()(h),x=d()(p),y=d()(f);b.push([i.id,`:host{display:block;overflow:hidden}*{box-sizing:border-box}button{appearance:none;background:none;border:none;padding:0}dialog{display:contents}dialog[open]{background-color:#0009;height:90vh;width:90vw}.inner{background-color:#000;border:1px solid #000;container-type:size;flex-direction:column;height:100%}.header,.inner{display:flex;width:100%}.header{align-items:center;background:#000;gap:.25rem;margin:0;min-height:1.75rem;padding:0 .5rem}.header span{color:#fff;font-size:var(--font-size-small);margin-right:auto}.scrim-fullscreen,.scrim-link{background-color:#fff;cursor:pointer;height:1rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:1rem}:is(.scrim-fullscreen,.scrim-link):hover{background-color:var(--curriculum-color)}.enter:is(.scrim-fullscreen,.scrim-link){-webkit-mask-image:url(${v});mask-image:url(${v})}.exit:is(.scrim-fullscreen,.scrim-link){-webkit-mask-image:url(${k});mask-image:url(${k})}.scrim-link:is(.scrim-fullscreen,.scrim-link){-webkit-mask-image:url(${w});mask-image:url(${w});-webkit-mask-size:75%;mask-size:75%}.body{flex:1;font-size:4cqmin;position:relative}.background{background-color:#453c78;background-image:url(${_}),url(${x}),url(${y});background-position:1.5em 1.5em,100%,50%;background-repeat:no-repeat;background-size:auto .6em,contain,cover;inset:0;position:absolute}.background h1{bottom:0;color:var(--color-white);font-family:BarlowCondensed-SemiBold,Inter,sans-serif;font-size:3em;font-weight:var(--font-weight-bold);left:0;line-height:var(--font-line-ui);margin:.5em;position:absolute;text-transform:uppercase;text-wrap:balance;width:60%}.background-noise{filter:url(#noise);inset:0;mix-blend-mode:soft-light;position:absolute}.open,iframe{border:none;height:100%;position:absolute;width:100%}.open{--color:#8cb4ffcc;background-image:var(--scrim-img);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;font-size:inherit}.open:hover{--color:#8cb4ffe5}.open svg{height:9em;width:auto;stroke-width:2px}:is(.open svg) circle{fill:var(--color)}:is(.open svg) path{fill:#fff}`,""]);let $=(0,s.iv)([b.toString()])}};
//# sourceMappingURL=1342.f607de3ba20f479f.js.map