<div
  (click)="!data.actionStr && close()"
  [class.error]="data.type === 'ERROR'"
  [class.success]="data.type === 'SUCCESS'"
  [class.warning]="data.type === 'WARNING'"
  class="wrapper"
>
  @if (!data.ico) {
    @if (data.type === 'SUCCESS') {
      <mat-icon class="snack-icon">check_circle </mat-icon>
    }
    @if (data.type === 'ERROR') {
      <mat-icon class="snack-icon">error </mat-icon>
    }
    @if (data.type === 'WARNING') {
      <mat-icon class="snack-icon">warning </mat-icon>
    }
  }
  @if (data.ico) {
    <mat-icon class="snack-icon">{{ data.ico }}</mat-icon>
  }
  @if (data.svgIco) {
    <mat-icon
      [svgIcon]="data.svgIco"
      class="snack-icon"
    ></mat-icon>
  }

  <span
    [innerHtml]="data.msg"
    class="message"
  ></span>

  <div class="button-wrapper">
    <div class="button-wrapper-inner">
      @if (data.actionStr) {
        <button
          (click)="actionClick()"
          class="action"
          color="accent"
          mat-button
        >
          {{ data.actionStr | translate }}
        </button>
      }
    </div>
  </div>

  @if (data.type === 'ERROR' || data.type === 'WARNING') {
    <button
      (click)="close($event)"
      [attr.aria-label]="T.G.DISMISS | translate"
      [matTooltip]="T.G.DISMISS | translate"
      class="close"
      mat-icon-button
      type="button"
    >
      <mat-icon>close</mat-icon>
    </button>
  }

  @if (data.promise || data.showWhile$ || data.isSpinner) {
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  }
</div>
