<div
  class="sky-token sky-btn sky-btn-default"
  [attr.role]="role"
  [ngClass]="{
    'sky-btn-disabled': disabled,
    'sky-token-disabled': disabled,
    'sky-token-dismissible': dismissible,
    'sky-token-active': tokenActive && !closeActive,
    'sky-token-focused': isFocused
  }"
  (document:mouseup)="setTokenActive(false)"
  (focusin)="onFocusIn()"
  (focusout)="onFocusOut($event)"
  (mousedown)="setTokenActive(true)"
>
  <span
    class="sky-token-cell"
    [attr.role]="role === 'row' ? 'gridcell' : undefined"
  >
    <button
      #actionButton="skyId"
      class="sky-btn sky-btn-default sky-token-btn sky-token-btn-action"
      type="button"
      skyId
      [attr.tabindex]="tabIndex"
      [disabled]="disabled"
      [ngClass]="{
        'sky-btn-disabled': disabled
      }"
    >
      <ng-content />
    </button>
  </span>
  @if (dismissible) {
    <span
      class="sky-token-cell"
      [attr.role]="role === 'row' ? 'gridcell' : undefined"
    >
      <button
        class="sky-btn sky-token-btn sky-token-btn-close"
        type="button"
        [attr.aria-label]="ariaLabel"
        [attr.aria-labelledby]="
          !ariaLabel
            ? screenReaderLabelDismiss.id + ' ' + actionButton.id
            : undefined
        "
        [attr.tabindex]="tabIndex"
        [attr.title]="
          ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)
        "
        [disabled]="disabled"
        [ngClass]="{
          'sky-btn-disabled': disabled,
          'sky-token-btn-close-active': closeActive
        }"
        (click)="dismissToken($event)"
        (document:mouseup)="setCloseActive(false)"
        (mousedown)="setCloseActive(true)"
      >
        <sky-icon class="sky-token-btn-close-icon" icon="close" />
      </button>
    </span>
  }
</div>
<span
  #screenReaderLabelDismiss="skyId"
  skyScreenReaderLabel
  skyId
  [createLabel]="dismissible && !ariaLabel"
>
  {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}
</span>
