import{j as a,r as t,k as o,l as r,m as e}from"./p-BxEPsDRj.js";import{n as s,c as i}from"./p-CrMmJdZ6.js";import"./p-WZF-tHaR.js";var n=a`
  :host {
    width: var(--local-width);
  }

  button {
    width: var(--local-width);
    white-space: nowrap;
    column-gap: ${({spacing:a})=>a[2]};
    transition:
      scale ${({durations:a})=>a["lg"]} ${({easings:a})=>a["ease-out-power-1"]},
      background-color ${({durations:a})=>a["lg"]}
        ${({easings:a})=>a["ease-out-power-2"]},
      border-radius ${({durations:a})=>a["lg"]}
        ${({easings:a})=>a["ease-out-power-1"]};
    will-change: scale, background-color, border-radius;
    cursor: pointer;
  }

  /* -- Sizes --------------------------------------------------- */
  button[data-size='sm'] {
    border-radius: ${({borderRadius:a})=>a[2]};
    padding: 0 ${({spacing:a})=>a[2]};
    height: 28px;
  }

  button[data-size='md'] {
    border-radius: ${({borderRadius:a})=>a[3]};
    padding: 0 ${({spacing:a})=>a[4]};
    height: 38px;
  }

  button[data-size='lg'] {
    border-radius: ${({borderRadius:a})=>a[4]};
    padding: 0 ${({spacing:a})=>a[5]};
    height: 48px;
  }

  /* -- Variants --------------------------------------------------------- */
  button[data-variant='accent-primary'] {
    background-color: ${({tokens:a})=>a.core.backgroundAccentPrimary};
    color: ${({tokens:a})=>a.theme.textInvert};
  }

  button[data-variant='accent-secondary'] {
    background-color: ${({tokens:a})=>a.core.foregroundAccent010};
    color: ${({tokens:a})=>a.core.textAccentPrimary};
  }

  button[data-variant='neutral-primary'] {
    background-color: ${({tokens:a})=>a.theme.backgroundInvert};
    color: ${({tokens:a})=>a.theme.textInvert};
  }

  button[data-variant='neutral-secondary'] {
    background-color: transparent;
    border: 1px solid ${({tokens:a})=>a.theme.borderSecondary};
    color: ${({tokens:a})=>a.theme.textPrimary};
  }

  button[data-variant='neutral-tertiary'] {
    background-color: ${({tokens:a})=>a.theme.foregroundPrimary};
    color: ${({tokens:a})=>a.theme.textPrimary};
  }

  button[data-variant='error-primary'] {
    background-color: ${({tokens:a})=>a.core.textError};
    color: ${({tokens:a})=>a.theme.textInvert};
  }

  button[data-variant='error-secondary'] {
    background-color: ${({tokens:a})=>a.core.backgroundError};
    color: ${({tokens:a})=>a.core.textError};
  }

  button[data-variant='shade'] {
    background: var(--wui-color-gray-glass-002);
    color: var(--wui-color-fg-200);
    border: none;
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
  }

  /* -- Focus states --------------------------------------------------- */
  button[data-size='sm']:focus-visible:enabled {
    border-radius: 28px;
  }

  button[data-size='md']:focus-visible:enabled {
    border-radius: 38px;
  }

  button[data-size='lg']:focus-visible:enabled {
    border-radius: 48px;
  }
  button[data-variant='shade']:focus-visible:enabled {
    background: var(--wui-color-gray-glass-005);
    box-shadow:
      inset 0 0 0 1px var(--wui-color-gray-glass-010),
      0 0 0 4px var(--wui-color-gray-glass-002);
  }

  /* -- Hover & Active states ----------------------------------------------------------- */
  @media (hover: hover) {
    button[data-size='sm']:hover:enabled {
      border-radius: 28px;
    }

    button[data-size='md']:hover:enabled {
      border-radius: 38px;
    }

    button[data-size='lg']:hover:enabled {
      border-radius: 48px;
    }

    button[data-variant='shade']:hover:enabled {
      background: var(--wui-color-gray-glass-002);
    }

    button[data-variant='shade']:active:enabled {
      background: var(--wui-color-gray-glass-005);
    }
  }

  button[data-size='sm']:active:enabled {
    border-radius: 28px;
  }

  button[data-size='md']:active:enabled {
    border-radius: 38px;
  }

  button[data-size='lg']:active:enabled {
    border-radius: 48px;
  }

  /* -- Disabled states --------------------------------------------------- */
  button:disabled {
    opacity: 0.3;
  }
`;var d=undefined&&undefined.__decorate||function(a,t,o,r){var e=arguments.length,s=e<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,o):r,i;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(a,t,o,r);else for(var n=a.length-1;n>=0;n--)if(i=a[n])s=(e<3?i(s):e>3?i(t,o,s):i(t,o))||s;return e>3&&s&&Object.defineProperty(t,o,s),s};const l={lg:"lg-regular-mono",md:"md-regular-mono",sm:"sm-regular-mono"};const u={lg:"md",md:"md",sm:"sm"};let c=class a extends r{constructor(){super(...arguments);this.size="lg";this.disabled=false;this.fullWidth=false;this.loading=false;this.variant="accent-primary"}render(){this.style.cssText=`\n    --local-width: ${this.fullWidth?"100%":"auto"};\n     `;const a=this.textVariant??l[this.size];return e`
      <button data-variant=${this.variant} data-size=${this.size} ?disabled=${this.disabled}>
        ${this.loadingTemplate()}
        <slot name="iconLeft"></slot>
        <wui-text variant=${a} color="inherit">
          <slot></slot>
        </wui-text>
        <slot name="iconRight"></slot>
      </button>
    `}loadingTemplate(){if(this.loading){const a=u[this.size];const t=this.variant==="neutral-primary"||this.variant==="accent-primary"?"invert":"primary";return e`<wui-loading-spinner color=${t} size=${a}></wui-loading-spinner>`}return null}};c.styles=[t,o,n];d([s()],c.prototype,"size",void 0);d([s({type:Boolean})],c.prototype,"disabled",void 0);d([s({type:Boolean})],c.prototype,"fullWidth",void 0);d([s({type:Boolean})],c.prototype,"loading",void 0);d([s()],c.prototype,"variant",void 0);d([s()],c.prototype,"textVariant",void 0);c=d([i("wui-button")],c);
//# sourceMappingURL=p-CG_zIdXa.js.map