export const __webpack_ids__=["8483"];export const __webpack_modules__={68342:function(e,t,a){e.exports=a.p+"external-link.4f3a2dc8e402cae5.svg"},46907:function(e,t,a){a.r(t),a.d(t,{MDNPlacementSidebar:()=>MDNPlacementSidebar});var i=a(14703),r=a(51968),n=a(68688);a(83294),a(43028);var o=a(35281),l=a(64686);let MDNPlacementSidebar=class MDNPlacementSidebar extends(0,o.P)(i.oi){static styles=l.Z;static properties={horizontal:{type:Boolean}};constructor(){super(),this.horizontal=!1}renderComplete(e){let{side:t}=e;if(!t)return i.Ld;let{status:a,click:o,view:l,copy:s,image:c,imageFormat:d,alt:m,cta:g,colors:p,version:h,heading:k}=t;if("success"!==a)return i.Ld;this._viewedUrl||(this._viewedUrl=l,this._version=h);let{textColor:b,backgroundColor:u,textColorDark:v,backgroundColorDark:f}=p||{},y=Object.fromEntries([["--side-background-light",u],["--side-color-light",b],["--side-background-dark",f||u],["--side-color-dark",v||b]].filter(([e,t])=>!!t));return"skyscraper"===d&&this.horizontal?i.Ld:"skyscraper"===d?(0,i.dy)`<section
          class=${`sidebar-placement-skyscraper ${this.horizontal?"horizontal":""}`}
        >
          <div
            ${(0,r.i)(this._placementRef)}
            class="placement-container"
            style=${(0,n.V)(y)}
          >
            <a
              class="placement-link"
              data-glean="pong: pong-&gt;click side"
              href=${this.clickLink(o,h)}
              target="_blank"
              rel="sponsored noreferrer"
              ><img
                src=${this.imgLink(c)}
                aria-hidden=${!m}
                alt=${m||""}
                width="160px"
                height="600px"
              />
            </a>
          </div>
          <mdn-placement-no></mdn-placement-no>
          <mdn-placement-note></mdn-placement-note>
        </section>`:(0,i.dy)`<section
          class=${`sidebar-placement ${this.horizontal?"horizontal":""}`}
        >
          <div
            ${(0,r.i)(this._placementRef)}
            class="placement-container"
            style=${(0,n.V)(y)}
          >
            <a
              class="placement-link"
              data-glean="pong: pong-&gt;click side"
              href=${this.clickLink(o,h)}
              target="_blank"
              rel="sponsored noreferrer"
              ><img
                src=${this.imgLink(c)}
                aria-hidden=${!m}
                alt=${m||""}
                width="125px"
                height="125px"
              />
              <div class="placement-content">
                <strong class="placement-heading">${k}</strong>
                <span class="placement-copy">${s}</span>
                <span class="placement-cta external">${g}</span>
              </div>
            </a>
            <mdn-placement-note></mdn-placement-note>
          </div>
          <mdn-placement-no></mdn-placement-no>
        </section>`}};customElements.define("mdn-placement-sidebar",MDNPlacementSidebar)},64686:function(e,t,a){a.d(t,{Z:()=>p});var i=a(14703),r=a(8081),n=a.n(r),o=a(23645),l=a.n(o),s=a(61667),c=a.n(s),d=new a.U(a(68342)),m=l()(n()),g=c()(d);m.push([e.id,`.sidebar-placement-skyscraper{display:grid;grid-template-areas:"pong pong" "note no";grid-template-columns:auto 1fr;grid-template-rows:auto auto;height:fit-content;margin:1rem 0;max-width:12rem;min-height:37.5rem}.sidebar-placement-skyscraper .placement-container{--side-background-light:#111;--side-color-light:#fff;--side-background-dark:#111;--side-color-dark:#fff;--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--0,var(--side-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--1,var(--side-color-light));grid-area:pong;height:37.5rem;margin:0;overflow:hidden;width:10rem}@supports (color:light-dark(red,red)){.sidebar-placement-skyscraper .placement-container{--side-background:light-dark(var(--side-background-light),var(--side-background-dark));--side-color:light-dark(var(--side-color-light),var(--side-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.sidebar-placement-skyscraper .placement-container) *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--0,var(--side-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--1,var(--side-color-light))}}:is(.sidebar-placement-skyscraper .placement-container) .placement-link{display:block;height:100%;padding:0;width:100%}:is(:is(.sidebar-placement-skyscraper .placement-container) .placement-link)>img{height:auto;width:100%}:is(:is(.sidebar-placement-skyscraper .placement-container) .placement-link)>.placement-content{align-items:center;color:var(--side-color);display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.sidebar-placement-skyscraper mdn-placement-note{grid-area:note;margin:0 auto 0 0}.sidebar-placement-skyscraper mdn-placement-no{grid-area:no;margin:0 0 0 auto}.sidebar-placement{display:flex;flex-direction:column;height:fit-content;margin:1rem 0;max-width:12rem;min-height:22rem}.sidebar-placement .placement-container{--side-background-light:#111;--side-color-light:#fff;--side-background-dark:#111;--side-color-dark:#fff;--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--2,var(--side-background-light));--csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--3,var(--side-color-light));--border-radius:0.5rem;border:1px solid var(--color-border-primary);border-radius:var(--border-radius);margin:0;min-height:20rem;overflow:hidden;position:relative;width:11rem}@supports (color:light-dark(red,red)){.sidebar-placement .placement-container{--side-background:light-dark(var(--side-background-light),var(--side-background-dark));--side-color:light-dark(var(--side-color-light),var(--side-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.sidebar-placement .placement-container) *{--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--2,var(--side-background-light));--csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--3,var(--side-color-light))}}:is(.sidebar-placement .placement-container):has(>.placement-link:focus-visible){outline:auto}:is(.sidebar-placement .placement-container) .placement-link{display:block;height:100%;padding:0;width:100%}:is(:is(.sidebar-placement .placement-container) .placement-link)>img{height:auto;width:100%}:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content{background:linear-gradient(to top,var(--side-background) 9rem,#0000 12rem,#0000);border-radius:var(--border-radius);color:var(--side-color);display:flex;flex-direction:column;gap:.25rem;height:100%;justify-content:end;line-height:1.25;position:absolute;top:0;width:100%}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-heading{font-size:.8875rem;padding:0 1rem}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-copy{font-size:.75rem;padding:0 1rem}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta{--color:var(--side-color);--icon-primary:var(--color);background-color:#ffffff11;border:2px solid;border-radius:2rem;color:var(--color);font-size:.75rem;font-weight:var(--font-weight-bold);margin:.5rem auto 1rem 1rem;padding:.5em 1em;transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):hover{--color:var(--side-background);background-color:var(--side-color)}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{background-color:var(--color);content:"";display:inline-flex;height:.625rem;margin-left:.25rem;-webkit-mask-image:url(${g});mask-image:url(${g});-webkit-mask-size:cover;mask-size:cover;width:.625rem}.sidebar-placement mdn-placement-note{position:absolute;right:0;top:0}@media (width >= 31rem){.sidebar-placement.horizontal{align-self:flex-end;max-width:30rem;min-height:12rem}.sidebar-placement.horizontal .placement-container{height:10rem;min-height:0;width:25rem}:is(:is(.sidebar-placement.horizontal .placement-container) .placement-link)>img{height:100%;position:absolute;width:auto;z-index:1}:is(:is(.sidebar-placement.horizontal .placement-container) .placement-link) .placement-content{align-items:end;background:var(--side-background);flex-direction:column;height:100%;justify-content:end;left:0;padding-left:10rem;width:auto}}`,""]);let p=(0,i.iv)([m.toString()])}};
//# sourceMappingURL=8483.04dd74ba6ef1c765.js.map