export const __webpack_ids__=["6213"];export const __webpack_modules__={28072:function(e,t,s){s.d(t,{Z:()=>c});var o=s(8081),a=s.n(o),l=s(23645),i=s.n(l)()(a());i.push([e.id,":is(.code-example,.css-formal-syntax) .token.cdata,:is(.code-example,.css-formal-syntax) .token.comment,:is(.code-example,.css-formal-syntax) .token.doctype,:is(.code-example,.css-formal-syntax) .token.prolog{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) #b3b3b3;color:var(--csstools-light-dark-toggle--0,#51565d);color:light-dark(#51565d,#b3b3b3)}:is(.code-example,.css-formal-syntax) .token.punctuation{--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) #b3b3b3;color:var(--csstools-light-dark-toggle--1,#51565d);color:light-dark(#51565d,#b3b3b3)}:is(.code-example,.css-formal-syntax) .token.attr-name,:is(.code-example,.css-formal-syntax) .token.builtin,:is(.code-example,.css-formal-syntax) .token.class-name,:is(.code-example,.css-formal-syntax) .token.function,:is(.code-example,.css-formal-syntax) .token.inserted,:is(.code-example,.css-formal-syntax) .token.property,:is(.code-example,.css-formal-syntax) .token.selector{--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) #ff97a0;color:var(--csstools-light-dark-toggle--2,#d30038);color:light-dark(#d30038,#ff97a0)}:is(.code-example,.css-formal-syntax) .token.atrule,:is(.code-example,.css-formal-syntax) .token.attr-value{--csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) #00d061;color:var(--csstools-light-dark-toggle--3,#007936);color:light-dark(#007936,#00d061)}:is(.code-example,.css-formal-syntax) .token.keyword{--csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) #c1cff1;color:var(--csstools-light-dark-toggle--4,#0069c2);color:light-dark(#0069c2,#c1cff1)}:is(.code-example,.css-formal-syntax) .token.boolean,:is(.code-example,.css-formal-syntax) .token.char,:is(.code-example,.css-formal-syntax) .token.constant,:is(.code-example,.css-formal-syntax) .token.deleted,:is(.code-example,.css-formal-syntax) .token.number,:is(.code-example,.css-formal-syntax) .token.string,:is(.code-example,.css-formal-syntax) .token.symbol,:is(.code-example,.css-formal-syntax) .token.tag{--csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) #00d061;color:var(--csstools-light-dark-toggle--5,#007936);color:light-dark(#007936,#00d061)}:is(.code-example,.css-formal-syntax) .token.builtin,:is(.code-example,.css-formal-syntax) .token.inserted,:is(.code-example,.css-formal-syntax) .token.selector,:is(.code-example,.css-formal-syntax) .token.template-string>.token.string{--csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) #bea5ff;color:var(--csstools-light-dark-toggle--6,#872bff);color:light-dark(#872bff,#bea5ff)}:is(.code-example,.css-formal-syntax) .token.bold,:is(.code-example,.css-formal-syntax) .token.important{font-weight:700}:is(.code-example,.css-formal-syntax) .token.italic{font-style:italic}:is(.code-example,.css-formal-syntax) .token.entity{cursor:help}",""]);let c=i.toString()},66178:function(e,t,s){s.r(t),s.d(t,{MDNCodeExample:()=>MDNCodeExample,upgradePre:()=>d});var o=s(35470),a=s(14703),l=s(51968),i=s(67621);s(28553);var c=s(69535),n=s(58620);let r=new Set(["html","js","css","wat"]);let MDNCodeExample=class MDNCodeExample extends(0,c.q)(a.oi){static styles=n.Z;static properties={language:{type:String},code:{type:String}};constructor(){super(),this.language="",this.code="",this._liveSample=void 0,this._liveSampleUpdate=this._liveSampleUpdate.bind(this)}get liveSample(){return this._liveSample}set liveSample(e){e&&(this._liveSample&&this._liveSample.removeEventListener("mdn-play-runner-src",this._liveSampleUpdate),this._liveSample=e,this._liveSample.addEventListener("mdn-play-runner-src",this._liveSampleUpdate))}_liveSampleUpdate(){this.requestUpdate()}_codeRef=(0,l.V)();_highlightTask=new o.iQ(this,{args:()=>[this.language,this.code],task:async([e,t])=>{let{highlightString:o}=await Promise.all([s.e("4876"),s.e("7194")]).then(s.bind(s,55508));return o(t,e)}});render(){return(0,a.dy)`
      <div class="code-example">
        <div class="example-header">
          <span class="language-name">${this.language}</span>
          <mdn-copy-button
            .copiesFrom=${this._codeRef.value}
            variant="secondary"
          ></mdn-copy-button>
          ${this.liveSample?.breakoutLink?(0,a.dy)`<mdn-button
                variant="secondary"
                href=${this.liveSample?.breakoutLink}
                target="_blank"
                rel="opener"
                aria-label=${this.l10n("example-play-button-title")}
                title=${this.l10n("example-play-button-title")}
                >${this.l10n("example-play-button-label")}</mdn-button
              >`:a.Ld}
        </div>
        <pre class=${this.className}><code ${(0,l.i)(this._codeRef)}>${this._highlightTask.render({initial:()=>this.code,pending:()=>this.code,complete:e=>(0,i.A)(e)})}</code></pre>
      </div>
    `}};function d(e){if(e instanceof HTMLPreElement){let t=e.closest("div.code-example"),s=[...e.classList].find(e=>r.has(e))||t?.querySelector(".language-name")?.textContent?.trim(),o=[...e.classList].some(e=>"hidden"===e||e.startsWith("interactive-example")),a=e.querySelector("code")?.textContent;if(t&&s&&a){let l=document.createElement("mdn-code-example");return l.language=s,l.code=a,l.hidden=o,l.className=e.className,t.replaceWith(l),l}}}customElements.define("mdn-code-example",MDNCodeExample)},58620:function(e,t,s){s.d(t,{Z:()=>p});var o=s(14703),a=s(8081),l=s.n(a),i=s(23645),c=s.n(i),n=s(54681),r=s(28072),d=s(56523),m=c()(l());m.i(n.Z),m.i(r.Z),m.i(d.Z),m.push([e.id,".code-example .example-header{gap:.5rem;padding-right:.5rem}:is(.code-example .example-header) .language-name{margin-right:auto}",""]);let p=(0,o.iv)([m.toString()])}};
//# sourceMappingURL=6213.a0ce0893893d15ee.js.map