<div
  class="sky-btn-tab-wrapper"
  [ngClass]="{
    'sky-btn-tab-wrapper-selected': active,
    'sky-btn-tab-wrapper-disabled': disabled
  }"
>
  <a
    #tabButtonEl
    class="sky-btn-tab"
    role="tab"
    [attr.aria-controls]="ariaControls"
    [attr.aria-disabled]="disabled"
    [attr.aria-selected]="active"
    [attr.href]="buttonHref"
    [attr.aria-label]="
      tabStyle === 'wizard'
        ? ('skyux_wizard_sr_step_' + wizardStepState
          | skyLibResources: tabNumber : totalTabsCount : buttonText)
        : null
    "
    [attr.aria-labelledby]="tabStyle === 'wizard' ? null : tabHeading.id"
    [id]="buttonId"
    [ngClass]="{
      'sky-btn-tab-wizard': tabStyle === 'wizard',
      'sky-btn-tab-selected': active,
      'sky-btn-tab-disabled': disabled,
      'sky-tab-btn-closeable': closeable
    }"
    [tabindex]="active ? '0' : '-1'"
    (click)="onButtonClick($event)"
    (keydown)="onTabButtonKeyDown($event)"
    (focus)="onFocus()"
  >
    <span class="sky-tab-heading" [attr.aria-hidden]="true">
      <span #tabHeading="skyId" skyId>
        {{ buttonText }}
        @if (buttonTextCount !== undefined) {
          <span class="sky-tab-header-count">
            {{ buttonTextCount }}
          </span>
        }
      </span>
      @if (closeable) {
        <span
          class="sky-btn-tab-close"
          [tabindex]="closeBtnTabIndex"
          [attr.aria-label]="'skyux_tab_close' | skyLibResources: buttonText"
          [ngClass]="{
            'sky-btn-tab-close-disabled': disabled
          }"
          (click)="onCloseClick($event)"
          (keydown.enter)="onCloseClick($event)"
        >
          <sky-icon icon="remove" />
        </span>
      }
    </span>
  </a>
</div>
