<div class="fab-wrapper">
  <div
    class="fab-position"
    (mouseenter)="enter($event)"
    (mouseleave)="leave($event)"
    [class.speed-dial-is-open]="openManager.isOpen"
  >
    <div
      class="speed-dial-options"
      [@speedDialAnimation]
      (@speedDialAnimation.start)="openManager.animationStart()"
      (@speedDialAnimation.done)="openManager.animationDone()"
      *ngIf="openManager.isOpen"
    >
      <ng-content select="button[mat-mini-fab]"></ng-content>
    </div>

    <button
      mat-fab
      [color]="color"
      class="speed-dial-main-button fullanimate mat-elevation-z6"
      [matTooltip]="tooltip"
      matTooltipPosition="left"
      [matTooltipDisabled]="!openManager.isOpen"
      (click)="click($event)"
      aria-label=""
    >
      <mat-icon
        class="icon-main"
        fontSet="material-icons-outlined"
        [aria-label]="ariaLabel"
      >
        {{ icon }}
      </mat-icon>
      <mat-icon
        *ngIf="iconHover !== undefined"
        class="icon-hover"
        fontSet="material-icons-outlined"
        [aria-label]="ariaLabel"
      >
        {{ iconHover }}
      </mat-icon>
    </button>
  </div>
</div>
