import{template as s}from"@gem-sdk/core";import i from"./Divider.liquid.js";import{createClass as e,createStyle as o,If as m}from"@gem-sdk/system";import{getClassContainerLine as t,getClassWrapNotIcon as r,getClassWrapIcon as d,getClassIcon as l,getClassText as $}from"../common/classes.js";import{getStyleWrapNotIcon as a,getStyleWrapIcon as c,getStyleIcon as f,getStyleContainerText as p}from"../common/styles.js";import{getConfigLine as n}from"../common/helpers.js";let v=v=>{let{className:y,setting:g,styles:j,advanced:u,builderProps:x}=v,{text:h,iconSvg:k}=g??{},S=n({styles:j,setting:g}),q=e(t({className:y,styles:j,advanced:u})),D=e(r({className:y,setting:g})),L=e(d({className:y,setting:g})),b=e(l()),w=e($({styles:j})),z=o(a({styles:j})),A=o(c({styles:j})),B=o(f({styles:j,setting:g})),C=o(p({styles:j}));return s`
    <div data-id="${x?.uid}" class="${q}">
      <div style="${z}" class="${D}"></div>
      <div class="${L}" style="${A}">
        ${i({config:S,fixedSide:"left",className:y})}
        ${m(!!k,s`
            <span
              class="${b}"
              style="${B}"
            >
              ${k}
            </span>
          `)}
        ${m(!!h,s`
            <span
              class="${w}"
              style="${C}"
            >
              ${h}
            </span>
          `)}
        ${i({config:S,fixedSide:"right",className:y})}
      </div>
    </div>
  `};export{v as default};
