import{makeStyleResponsive as t,usePageStore as e,useCurrentDevice as o}from"@gem-sdk/core";import{useMemo as l}from"react";let useSticky=p=>{let{width:a,position:s}=p??{},b=t("w",a),d=e(t=>"interaction"===t.sidebarMode),i=o(),k=(t,e)=>({[`--left${e}`]:"top"==t?"0":"50%",[`--t${e}`]:"top"==t?"unset":"translateX(-50%)"}),m=l(()=>({...k(s?.desktop,""),...k(s?.tablet??s?.desktop,"-tablet"),...k(s?.mobile??s?.tablet??s?.desktop,"-mobile")}),[s?.desktop,s?.mobile,s?.tablet]),r=l(()=>{if(d&&s?.[i]==="top")return"40px"},[i,d,s]),y=l(()=>({"--d":(p?.display?.desktop,"block"),"--d-tablet":(p?.display?.tablet??p?.display?.desktop,"block"),"--d-mobile":(p?.display?.mobile??p?.display?.tablet??p?.display?.desktop,"block")}),[p?.display?.desktop,p?.display?.mobile,p?.display?.tablet]),c=l(()=>({"--top":r??"auto","--top-tablet":r??"auto","--top-mobile":r??"auto",[`--${s?.desktop}`]:r??"0px",[`--${s?.tablet??s?.desktop}-tablet`]:r??"0px",[`--${s?.mobile??s?.tablet??s?.desktop}-mobile`]:r??"0px"}),[r,s?.desktop,s?.mobile,s?.tablet]),u=t=>"top"==t?"sticky":"fixed",f=l(()=>({"--pos":u(s?.desktop),"--pos-tablet":u(s?.tablet??s?.desktop),"--pos-mobile":u(s?.mobile??s?.tablet??s?.desktop)}),[s?.desktop,s?.mobile,s?.tablet]);return{w:b,displayStyle:c,positionStyle:f,getCSSAlign:m,makeDisplaySettingStyles:y}};export{useSticky as default};
