import{composeClasses as t,template as e,RenderChildren as s}from"@gem-sdk/core";import i from"../../text/components/Text.liquid.js";import{getParentSettings as a,getSettingItemLiquid as o,MINIMUM_CHILD as l,BODY_CHILD_INDEX as n}from"../common/helpers.js";import{createClass as d,createStyle as r,If as $}from"@gem-sdk/system";import{getItemContainerClasses as p,getDropdownClasses as c,getIconClasses as m,getIconRotateClasses as v,getContentClasses as y,getGapClasses as x,getLayoutIconClasses as g,getRenderChildrenClasses as u}from"../common/classes.js";import{getIconGlobalSize as f,getItemContainerStyles as h,getDropdownStyles as S,getDropdownTextStyles as j,getIconRotateStyles as I,getGapStyles as T,getIconStyles as b,getRenderChildrenStyles as k,getTemplateRow as q}from"../common/styles.js";let w=w=>{let{parentUid:F,childrenIcon:A,rawChildren:C,index:M,builderProps:N,title:V}=w,{iconSvg:_,titleTypo:z,layoutHeader:B,iconGlobalSize:D,iconCollapseSize:E,iconCollapse:G,iconExpand:H,alignment:J,configIconSize:K,iconPosition:L}=a(w.parentSetting)??{},{isShow:O,composeContentSizeStyle:P,collapsibleIcon:Q,composeIconColor:R,makeIcon:U}=o(w),W=d(p),X=d(c(w.parentStyle,{isShow:O,uniqueId:F,makeIcon:U,index:M})),Y=r(f(D)),Z=d(m),tt=d(v(w.parentStyle,{isShow:O,iconExpand:H,iconSvg:_,iconCollapse:G})),te=d(y(F)),ts=d(x),ti=r(h(w.parentStyle,!1)),ta=r(S(w.parentStyle,{isShow:O,iconPosition:L})),to=r(j(w.parentStyle?.textColor,O)),tl=r(I(w.parentStyle,O,E)),tn=r(T(D,J)),td=d(t("gp-inline-flex")),tr=d(O?{...t("!gp-text-[var(--icon-active-color)]"),...g}:g),t$=r(b(R,K)),tp=d(u(w.parentStyle,{isShow:O,hasTransitionedIn:!1,isMounted:!1})),tc=r({...q(O),...k()}),tm=d(t("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0"));return e`
  <div class="${W}" style="${ti}">
    <div data-index="${M?.toString()}" class="${te}">
      <div aria-hidden uid="${N?.uid}" id="${N?.uid}" data-index="${M?.toString()}"
        class="${X}" style="${ta}">
        ${$(!!Q,e`
          <div class="${Z}">
            <span style="${tl}"
            data-index="${M}"
            class="${tt}">
              ${Q}
            </span>
          </div>
          `)}
        <div class="${ts}" style="${tn}">
          ${$("before-text"===B,e`
          <div class="${td}" style="${{...Y}}">
            <span
              class="${tr}"
              style="${t$}">
              ${A??""}</span>
          </div>
          `)}
          ${i({style:{...to},styles:{typo:z},setting:{htmlTag:"div",text:V,excludeFlex:!0,isForceValue:!0},className:"gp-overflow-hidden gp-accordion-text-content group-hover:[color:var(--text-hover-color)!important]"})}
          ${$("after-text"===B,e`
          <div class="${td}" style="${{...Y}}">
            <span
              class="${tr}"
              style="${t$}">
              ${A??""}</span>
          </div>
          `)}
        </div>
      </div>
      <div data-index="${M}" data-show="${O}" class="${tp}" style="${tc}">
        <div data-index="${M}" class="${tm}" style="${P()}">
          ${C&&C.length>=l?s({...C[n]}):""}
        </div>
      </div>
    </div>
  </div>
  `};export{w as default};
