(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[72216],{14281:(s,e,p)=>{"use strict";p.r(e),p.d(e,{default:()=>t});var a=p(87687),o=p(31928),r=p(20120);let d=(0,o.I)("div")({name:"Wrapper",class:"wya20fe",propsAsIs:!1}),n=(0,o.I)("img")({name:"Image",class:"i1frud41",propsAsIs:!1}),l=(0,o.I)(r.qB)({name:"OutputWrapper",class:"o11qe2cf",propsAsIs:!0}),t=function(){return(0,a.jsx)(r.Ay,{id:"shadow-comp",initialValues:{mode:"filter"},outputWrapper:l,controls:[(0,a.jsx)(r.wI,{id:"mode",label:"Shadow",options:["filter","box-shadow","none"]},"mode")],children:s=>{let{mode:e}=s,p="filter"===e?"\n            drop-shadow(2px 4px 8px hsl(220deg 60% 50% / 0.44))\n            drop-shadow(4px 8px 16px hsl(220deg 60% 50% / 0.44))\n            drop-shadow(8px 16px 32px hsl(220deg 60% 50% / 0.44))\n          ":"",o="box-shadow"===e?"\n            2px 4px 8px hsl(220deg 60% 50% / 0.44),\n            4px 8px 16px hsl(220deg 60% 50% / 0.44),\n            8px 16px 32px hsl(220deg 60% 50% / 0.44)\n          ":"";return(0,a.jsx)(d,{style:{filter:p,boxShadow:o},children:(0,a.jsx)(n,{alt:"3D illustration of a scared ghost",src:"/images/designing-shadows/ghost-transparent.png"})},p+o)}})};p(86679)},86679:s=>{s.exports={wya20fe:"wya20fe",i1frud41:"i1frud41",o11qe2cf:"o11qe2cf"}}}]);
//# sourceMappingURL=72216.94e6e41c1807257e.js.map