(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[58991],{58991:(e,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>I});var n=a(87687),r=a(31928),l=a(52751),t=a(30251),o=a(68852),c=a(82310);let p=(0,r.I)(t.CS.button)({name:"StandardLayer",class:"snmvixq",propsAsIs:!0}),i=(0,r.I)(t.CS.button)({name:"FirstLayer",class:"fr4n619",propsAsIs:!0}),m=(0,r.I)("div")({name:"Label",class:"llihdrk",propsAsIs:!1}),d=(0,r.I)(m)({name:"TopLabel",class:"t3a20k4",propsAsIs:!0}),v=(0,r.I)("div")({name:"LabelText",class:"l1w06mrw",propsAsIs:!1}),g=(0,r.I)("img")({name:"Image",class:"is3g1ra",propsAsIs:!1}),h=e=>{let{index:s,name:a,src:r,width:m,numOfLayers:h}=e,[x,u]=l.useState(!1),{width:k}=(0,c.A)();void 0===k&&(k=1e3);let I=Math.min(.1*k,85),f=(0,o.S8)(s,0,h-1,I,-I),w=(0,t.zh)({transform:"translate(".concat(f,"%) skewY(20deg)"),opacity:x?1:.75});return(0,n.jsxs)(0===s?i:p,{style:{width:m,...w},onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),onFocus:()=>u(!0),onBlur:()=>u(!1),children:[(0,n.jsx)(d,{style:{opacity:x?1:0},children:(0,n.jsx)(v,{children:a})}),(0,n.jsx)(g,{alt:"",src:r})]},a)};a(89999);let x=(0,r.I)("div")({name:"OuterWrapper",class:"o136zb5f",propsAsIs:!1}),u=(0,r.I)("div")({name:"Wrapper",class:"w2fo0b5",propsAsIs:!1}),k=e=>{let{layerWidth:s=250,layers:a}=e;return(0,n.jsx)(x,{children:(0,n.jsx)(u,{children:a.map((e,r)=>(0,n.jsx)(h,{index:r,name:e.name,src:e.src,width:s,numOfLayers:a.length},e.name))})})};a(91267);let I=function(){return(0,n.jsx)(k,{layers:[{src:"/images/stacking-contexts/envelope/envelope-layer-back.svg",name:"1. Back Pane"},{src:"/images/stacking-contexts/envelope/envelope-layer-content.svg",name:"2. Letter"},{src:"/images/stacking-contexts/envelope/envelope-layer-shell.svg",name:"3. Shell"},{src:"/images/stacking-contexts/envelope/envelope-layer-flap.svg",name:"4. Flap"}]})}},89999:e=>{e.exports={snmvixq:"snmvixq",fr4n619:"fr4n619",llihdrk:"llihdrk",t3a20k4:"t3a20k4",l1w06mrw:"l1w06mrw",is3g1ra:"is3g1ra"}},91267:e=>{e.exports={o136zb5f:"o136zb5f",w2fo0b5:"w2fo0b5"}}}]);
//# sourceMappingURL=58991.ffb5d6120170cf12.js.map