export const __webpack_ids__=["3580"];export const __webpack_modules__={61485:function(e,t,a){a.r(t),a.d(t,{MDNPlacementTop:()=>MDNPlacementTop});var o=a(14703),n=a(51968),l=a(68688);a(83294),a(43028);var r=a(35281),c=a(46886);let p=(0,o.dy)`<div class="top-placement empty"></div>`;let MDNPlacementTop=class MDNPlacementTop extends(0,r.P)(o.oi){static styles=c.Z;renderInitial(){return p}renderFallback(){return(0,o.dy)`
      <div class="fallback">
        <p class="fallback__copy">
          Learn front-end development with high quality, interactive courses
          from
          <a
            href="https://scrimba.com/learn/frontend?via=mdn"
            target="_blank"
            rel="noreferrer"
            data-glean="pong: pong-&gt;click fallback-scrimba"
          >
            Scrimba
          </a>
        </p>
      </div>
    `}renderComplete(e){if("noads"===e.status)return o.Ld;let t=e?.hpTop||e?.top;if(!t)return p;let{status:a,click:r,view:c,copy:i,image:d,imageFormat:s,alt:m,cta:g,colors:h,version:k}=t;if("success"!==a)return p;this._viewedUrl||(this._viewedUrl=c,this._version=k);let{textColor:v,backgroundColor:b,ctaTextColor:u,ctaBackgroundColor:f,textColorDark:y,backgroundColorDark:x,ctaTextColorDark:_,ctaBackgroundColorDark:w}=h||{},$=Object.fromEntries([["--place-top-background-light",b],["--place-top-color-light",v],["--place-top-cta-background-light",f],["--place-top-cta-color-light",u],["--place-top-background-dark",x||b],["--place-top-color-dark",y||v],["--place-top-cta-background-dark",w||f],["--place-top-cta-color-dark",_||f]].filter(([e,t])=>!!t));return"leaderboard"===s?(0,o.dy)`<div
          ${(0,n.i)(this._placementRef)}
          class="top-placement-leaderboard"
          style=${(0,l.V)($)}
        >
          <section class="placement-container">
            <div class="placement-inner">
              <a
                class="placement-link"
                data-glean="pong: pong-&gt;click top-banner"
                href=${this.clickLink(r,k)}
                target="_blank"
                rel="sponsored noreferrer"
                ><div class="placement-content">
                  <img
                    src=${this.imgLink(d)}
                    aria-hidden=${!m}
                    alt=${m||""}
                    height="90"
                  />
                </div>
              </a>
            </div>
            <mdn-placement-note></mdn-placement-note>
            <mdn-placement-no></mdn-placement-no>
          </section>
        </div>`:(0,o.dy)`<div
          ${(0,n.i)(this._placementRef)}
          class="top-placement"
          style=${(0,l.V)($)}
        >
          <section class="placement-container">
            <div class="placement-inner">
              <a
                class="placement-link"
                data-glean="pong: pong-&gt;click top-banner"
                href=${this.clickLink(r,k)}
                target="_blank"
                rel="sponsored noreferrer"
                ><div class="placement-content">
                  <img
                    src=${this.imgLink(d)}
                    aria-hidden=${!m}
                    alt=${m||""}
                    height="50"
                  /><span>${i}</span>
                </div>
                <span class="placement-cta">${g}</span></a
              >
              <mdn-placement-note></mdn-placement-note>
            </div>
            <mdn-placement-no></mdn-placement-no>
          </section>
        </div>`}};customElements.define("mdn-placement-top",MDNPlacementTop)},46886:function(e,t,a){a.d(t,{Z:()=>p});var o=a(14703),n=a(8081),l=a.n(n),r=a(23645),c=a.n(r)()(l());c.push([e.id,':host{background-color:var(--color-background-primary);display:block}.top-placement,.top-placement-leaderboard{--place-top-background-light:var(--color-background-primary);--place-top-color-light:var(--color-text-primary);--place-top-cta-background-light:var(--color-text-primary);--place-top-cta-color-light:var(--color-background-secondary);--place-top-background-dark:var(--color-background-primary);--place-top-color-dark:var(--color-text-primary);--place-top-cta-background-dark:var(--color-text-primary);--place-top-cta-color-dark:var(--color-background-secondary);--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--place-top-color-dark);--place-top-color:var(--csstools-light-dark-toggle--0,var(--place-top-color-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--place-top-cta-background-dark);--place-top-cta-background:var(--csstools-light-dark-toggle--1,var(--place-top-cta-background-light));--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--place-top-cta-color-dark);--place-top-cta-color:var(--csstools-light-dark-toggle--2,var(--place-top-cta-color-light));background-color:var(--place-top-background);min-height:calc(var(--top-placement-inner-height) + var(--top-placement-inner-padding)*2);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.top-placement,.top-placement-leaderboard{--place-top-color:light-dark(var(--place-top-color-light),var(--place-top-color-dark));--place-top-cta-background:light-dark(var(--place-top-cta-background-light),var(--place-top-cta-background-dark));--place-top-cta-color:light-dark(var(--place-top-cta-color-light),var(--place-top-cta-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.top-placement,.top-placement-leaderboard) *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--place-top-color-dark);--place-top-color:var(--csstools-light-dark-toggle--0,var(--place-top-color-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--place-top-cta-background-dark);--place-top-cta-background:var(--csstools-light-dark-toggle--1,var(--place-top-cta-background-light));--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--place-top-cta-color-dark);--place-top-cta-color:var(--csstools-light-dark-toggle--2,var(--place-top-cta-color-light))}}.top-placement{--csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) var(--place-top-background-dark);--place-top-background:var(--csstools-light-dark-toggle--3,var(--place-top-background-light));--top-placement-inner-height:3.125rem;--top-placement-inner-padding:0.125rem;border-bottom:1px solid var(--color-border-primary);padding-bottom:.125rem}@supports (color:light-dark(red,red)){.top-placement{--place-top-background:light-dark(var(--place-top-background-light),var(--place-top-background-dark))}}@supports not (color:light-dark(tan,tan)){.top-placement *{--csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) var(--place-top-background-dark);--place-top-background:var(--csstools-light-dark-toggle--3,var(--place-top-background-light))}}.top-placement .placement-container{align-items:center;display:grid;font-size:.75rem;grid-template-areas:"pong cta" "no note";height:100%;margin:0 auto;width:100%}@media (769px < width){.top-placement .placement-container{grid-template-areas:"pong cta note" "pong cta no";grid-template-columns:fit-content(100%) auto fit-content(100%)}}:is(.top-placement .placement-container) .placement-inner{border:none;display:contents;width:100%}:is(:is(.top-placement .placement-container) .placement-inner) .placement-link{display:contents}:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content{align-items:center;color:var(--place-top-color);display:flex;flex-direction:row;grid-area:pong;padding:var(--top-placement-inner-padding);-webkit-text-decoration:none;text-decoration:none}:is(:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content) img{height:var(--top-placement-inner-height);max-height:var(--top-placement-inner-height);width:auto}:is(:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content) span{color:var(--place-top-color);max-height:var(--top-placement-inner-height);overflow:auto;padding:0 1rem}:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-cta{background-color:var(--place-top-cta-background);border-radius:.25rem;color:var(--place-top-cta-color);font-size:var(--font-size-small);grid-area:cta;height:fit-content;margin-right:auto;padding:.25rem 1rem;text-align:center}:is(:is(.top-placement .placement-container) .placement-inner) mdn-placement-note{grid-area:note;margin:.25rem 0 auto auto}:is(.top-placement .placement-container) mdn-placement-no{color:var(--place-top-color);grid-area:no;margin:auto 0 0 2rem;width:auto}.top-placement-leaderboard{--place-top-background:#0000;--top-placement-inner-height:5.625rem;--top-placement-inner-padding:0rem;padding-bottom:0}.top-placement-leaderboard .placement-container{align-items:center;display:grid;font-size:.75rem;grid-template-areas:"left pong note" "left pong no";grid-template-columns:1fr fit-content(100%) 1fr;height:100%;margin:0 auto;width:100%}:is(.top-placement-leaderboard .placement-container) .placement-inner{border:none;display:contents;width:100%}:is(:is(.top-placement-leaderboard .placement-container) .placement-inner) .placement-link{display:contents}:is(:is(:is(.top-placement-leaderboard .placement-container) .placement-inner) .placement-link) .placement-content{align-items:center;display:flex;flex-direction:column;grid-area:pong;justify-content:center;padding:0}:is(:is(:is(:is(.top-placement-leaderboard .placement-container) .placement-inner) .placement-link) .placement-content) img{height:5.625rem;width:45.5rem}:is(.top-placement-leaderboard .placement-container) mdn-placement-note{grid-area:note;margin:.25rem 0 auto auto}@media (width <= 992px){:is(.top-placement-leaderboard .placement-container) mdn-placement-note{display:none}}:is(.top-placement-leaderboard .placement-container) mdn-placement-no{color:var(--place-top-color);grid-area:no;margin:auto 0 .25rem auto}@media (width <= 992px){:is(.top-placement-leaderboard .placement-container) mdn-placement-no{display:none}}.top-placement.empty{border-bottom:none}.fallback{align-items:center;display:flex;flex-direction:column;justify-content:center}.fallback-copy{font-size:1rem;line-height:var(--top-banner-height);margin:0 auto}.fallback-copy a:not(.button){color:var(--color-link-normal)}',""]);let p=(0,o.iv)([c.toString()])}};
//# sourceMappingURL=3580.c889979b4266bc20.js.map