{{#let
  'inline-flex items-center cursor-pointer border hover:opacity-80 active:opacity-60 focus:outline-none'
  (hash
    primary='text-primary border-primary'
    default='text-black border-gray-dark'
  )
  (hash
    small='px-2.5 py-1.5 text-sm'
    default='px-3 py-2 leading-4 text-sm'
  )
  as |commonClasses styleClasses sizeClasses|
}}
  <button
    disabled={{this.disabled}}
    type={{this.type}}
    class="{{commonClasses}}
      {{get styleClasses (if this.isActive 'primary' this.style)}}

      {{get sizeClasses this.size}}

      {{if @group 'first:rounded-l-md last:rounded-r-md' 'rounded-md'}}"
    ...attributes
    {{on 'click' this.handleClick}}
  >
    {{#if this.isPending}}
      <Icons::Loading @spin={{true}} class="mx-1" />
    {{else if @icon}}
      <@icon class="mx-1" />
    {{/if}}
    {{#if this.text}}
      <span class="mx-1">
        {{this.text}}
      </span>
    {{/if}}
  </button>
{{/let}}