<a
  #tabButton
  class="sky-vertical-tab sky-vertical-tabset-button"
  [attr.aria-controls]="isMobile ? null : ariaControls || tabContentPane.id"
  [attr.aria-disabled]="disabled || undefined"
  [attr.aria-selected]="active"
  [attr.id]="tabId"
  [attr.role]="isMobile ? undefined : ariaRole"
  [ngClass]="{
    'sky-vertical-tab-active': active,
    'sky-vertical-tabset-button-disabled': disabled,
    'sky-font-deemphasized': disabled,
    'sky-deemphasized': disabled
  }"
  [tabIndex]="-1"
  (click)="activateTab()"
  (keyup.arrowleft)="tabButtonArrowLeft($event)"
  (keyup.enter)="tabButtonActivate($event)"
  (keyup.space)="tabButtonActivate($event)"
>
  <div class="sky-vertical-tab-display">
    <div class="sky-vertical-tab-heading">
      <span class="sky-vertical-tab-heading-value">{{ tabHeading }}</span>
      @if (tabHeaderCount || tabHeaderCount === 0) {
        <span class="sky-vertical-tab-count"> ({{ tabHeaderCount }}) </span>
      }
    </div>
    @if (errorIndicator) {
      <sky-status-indicator
        class="sky-vertical-tab-heading-error"
        descriptionType="error"
        indicatorType="danger"
      />
    }
    @if (isMobile && showTabRightArrow) {
      <sky-icon class="sky-vertical-tab-right-arrow" icon="chevron-right" />
    }
  </div>
</a>

<div #tabContentWrapper skyResponsiveHost>
  <div
    #tabContentPane
    class="sky-vertical-tab-content-pane"
    role="tabpanel"
    tabindex="0"
    skyId
    [attr.aria-labelledby]="tabId"
    [ngClass]="{ 'sky-vertical-tab-hidden': !active }"
  >
    <ng-content />
  </div>
</div>
