@if (!!permalink?.route?.commands) {
  <a
    class="sky-action-button sky-btn-default sky-rounded-corners"
    tabindex="0"
    [fragment]="permalink?.route?.extras?.fragment"
    [skyThemeClass]="{
      'sky-btn sky-box': 'modern'
    }"
    [queryParams]="permalink?.route?.extras?.queryParams"
    [queryParamsHandling]="permalink?.route?.extras?.queryParamsHandling"
    [routerLink]="permalink?.route?.commands"
  >
    <ng-container *ngTemplateOutlet="actionButtonContent" />
  </a>
} @else if (!permalink?.route && permalink?.url) {
  @if (
    !permalink?.url?.includes('://') || permalink?.url?.startsWith('https://')
  ) {
    <a
      class="sky-action-button sky-btn-default sky-rounded-corners"
      tabindex="0"
      [href]="permalink?.url"
      [skyThemeClass]="{
        'sky-btn sky-box': 'modern'
      }"
    >
      <ng-container *ngTemplateOutlet="actionButtonContent" />
    </a>
  } @else {
    <a
      class="sky-action-button sky-btn-default sky-rounded-corners"
      tabindex="0"
      [skyHref]="permalink?.url"
      [skyThemeClass]="{
        'sky-btn sky-box': 'modern'
      }"
      (skyHrefChange)="onSkyHrefDisplayChange($event)"
    >
      <ng-container *ngTemplateOutlet="actionButtonContent" />
    </a>
  }
} @else {
  <div
    class="sky-action-button sky-btn-default sky-rounded-corners"
    tabindex="0"
    role="button"
    [skyThemeClass]="{
      'sky-btn sky-box': 'modern'
    }"
    (click)="buttonClicked()"
    (keydown.enter)="enterPress()"
  >
    <ng-container *ngTemplateOutlet="actionButtonContent" />
  </div>
}

<ng-template #actionButtonContent>
  <ng-container *skyThemeIf="'default'">
    <div class="sky-action-button-icon-header-container">
      <ng-container *ngTemplateOutlet="icon" />
      <ng-container *ngTemplateOutlet="header" />
    </div>
    <ng-container *ngTemplateOutlet="details" />
  </ng-container>

  <ng-container *skyThemeIf="'modern'">
    <ng-container *ngTemplateOutlet="icon" />
    <div class="sky-action-button-content">
      <ng-container *ngTemplateOutlet="header" />
      <div
        class="sky-action-button-details"
        [skyThemeClass]="{
          'sky-font-deemphasized': 'modern'
        }"
      >
        <ng-container *ngTemplateOutlet="details" />
      </div>
    </div>
  </ng-container>
</ng-template>

<ng-template #icon>
  <ng-content select="sky-action-button-icon" />
</ng-template>

<ng-template #header>
  <ng-content select="sky-action-button-header" />
</ng-template>

<ng-template #details>
  <ng-content select="sky-action-button-details" />
</ng-template>