import{j as t,r as i,k as e,l as a,m as o}from"./p-BxEPsDRj.js";import{n as s,c as n}from"./p-CrMmJdZ6.js";import"./p-CbOrugAV.js";import"./p-08zq6pz3.js";var r=t`
  button {
    display: block;
    display: flex;
    align-items: center;
    padding: ${({spacing:t})=>t[1]};
    transition: background-color ${({durations:t})=>t["lg"]}
      ${({easings:t})=>t["ease-out-power-2"]};
    will-change: background-color;
    background-color: ${({tokens:t})=>t.theme.foregroundPrimary};
    border-radius: ${({borderRadius:t})=>t[32]};
  }

  wui-image {
    border-radius: ${({borderRadius:t})=>t[32]};
  }

  wui-text {
    padding-left: ${({spacing:t})=>t[1]};
    padding-right: ${({spacing:t})=>t[1]};
  }

  .left-icon-container {
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
  }

  .left-image-container {
    position: relative;
    justify-content: center;
    align-items: center;
  }

  .chain-image {
    position: absolute;
    border: 1px solid ${({tokens:t})=>t.theme.foregroundPrimary};
  }

  /* -- Sizes --------------------------------------------------- */
  button[data-size='lg'] {
    height: 32px;
  }

  button[data-size='md'] {
    height: 28px;
  }

  button[data-size='sm'] {
    height: 24px;
  }

  button[data-size='lg'] .token-image {
    width: 24px;
    height: 24px;
  }

  button[data-size='md'] .token-image {
    width: 20px;
    height: 20px;
  }

  button[data-size='sm'] .token-image {
    width: 16px;
    height: 16px;
  }

  button[data-size='lg'] .left-icon-container {
    width: 24px;
    height: 24px;
  }

  button[data-size='md'] .left-icon-container {
    width: 20px;
    height: 20px;
  }

  button[data-size='sm'] .left-icon-container {
    width: 16px;
    height: 16px;
  }

  button[data-size='lg'] .chain-image {
    width: 12px;
    height: 12px;
    bottom: 2px;
    right: -4px;
  }

  button[data-size='md'] .chain-image {
    width: 10px;
    height: 10px;
    bottom: 2px;
    right: -4px;
  }

  button[data-size='sm'] .chain-image {
    width: 8px;
    height: 8px;
    bottom: 2px;
    right: -3px;
  }

  /* -- Focus states --------------------------------------------------- */
  button:focus-visible:enabled {
    background-color: ${({tokens:t})=>t.theme.foregroundSecondary};
    box-shadow: 0 0 0 4px ${({tokens:t})=>t.core.foregroundAccent040};
  }

  /* -- Hover & Active states ----------------------------------------------------------- */
  @media (hover: hover) {
    button:hover:enabled,
    button:active:enabled {
      background-color: ${({tokens:t})=>t.theme.foregroundSecondary};
    }
  }

  /* -- Disabled states --------------------------------------------------- */
  button:disabled {
    background-color: ${({tokens:t})=>t.theme.foregroundSecondary};
    opacity: 0.5;
  }
`;var d=undefined&&undefined.__decorate||function(t,i,e,a){var o=arguments.length,s=o<3?i:a===null?a=Object.getOwnPropertyDescriptor(i,e):a,n;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(t,i,e,a);else for(var r=t.length-1;r>=0;r--)if(n=t[r])s=(o<3?n(s):o>3?n(i,e,s):n(i,e))||s;return o>3&&s&&Object.defineProperty(i,e,s),s};const h={lg:"lg-regular",md:"lg-regular",sm:"md-regular"};const c={lg:"lg",md:"md",sm:"sm"};let u=class t extends a{constructor(){super(...arguments);this.size="md";this.disabled=false;this.text="";this.loading=false}render(){if(this.loading){return o` <wui-flex alignItems="center" gap="01" padding="01">
        <wui-shimmer width="20px" height="20px"></wui-shimmer>
        <wui-shimmer width="32px" height="18px" borderRadius="4xs"></wui-shimmer>
      </wui-flex>`}return o`
      <button ?disabled=${this.disabled} data-size=${this.size}>
        ${this.imageTemplate()} ${this.textTemplate()}
      </button>
    `}imageTemplate(){if(this.imageSrc&&this.chainImageSrc){return o`<wui-flex class="left-image-container">
        <wui-image src=${this.imageSrc} class="token-image"></wui-image>
        <wui-image src=${this.chainImageSrc} class="chain-image"></wui-image>
      </wui-flex>`}if(this.imageSrc){return o`<wui-image src=${this.imageSrc} class="token-image"></wui-image>`}const t=c[this.size];return o`<wui-flex class="left-icon-container">
      <wui-icon size=${t} name="networkPlaceholder"></wui-icon>
    </wui-flex>`}textTemplate(){const t=h[this.size];return o`<wui-text color="primary" variant=${t}
      >${this.text}</wui-text
    >`}};u.styles=[i,e,r];d([s()],u.prototype,"size",void 0);d([s()],u.prototype,"imageSrc",void 0);d([s()],u.prototype,"chainImageSrc",void 0);d([s({type:Boolean})],u.prototype,"disabled",void 0);d([s()],u.prototype,"text",void 0);d([s({type:Boolean})],u.prototype,"loading",void 0);u=d([n("wui-token-button")],u);
//# sourceMappingURL=p-DJUlqjcR.js.map