<style>
  .stroke-anim {
    animation: stroke-anim 0.75s ease-in-out 0s 1 forwards;
  }
  .check-anim {
    animation: check-anim 0.35s ease-in-out 0.5s 1 forwards;
  }
  .symbol-anim {
    animation: symbol-anim 0.35s ease-in-out 0.5s 1 forwards;
  }

  @keyframes stroke-anim {
    0% {
      stroke-dashoffset: 60;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }

  @keyframes check-anim {
    0% {
      stroke-dashoffset: 28;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes symbol-anim {
    0% {
      stroke-dashoffset: 7;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }

  .delay-05 {
    animation-delay: 0.5s;
  }
</style>
<div class="d-flex a-i-center p-24 m-24 p-b-0" [ngClass]="{ 'd-col j-c-center': vertical }">
  <svg *ngIf="type === 'success'" class="flex-no-shrink" viewBox="0 0 24 24" [ngStyle]="{ 'max-width.px': size || 64 }">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
      <polyline
        stroke="var(--input-validation-success, #008800)"
        stroke-width="2"
        stroke-linejoin="round"
        points="7.8678862 11.508 11.9656988 15.984 20.2137797 7.44836856"
        class="check-anim"
        stroke-dasharray="28"
        stroke-dashoffset="28"
      ></polyline>
      <path
        d="M18.3656773,3.02795925 C16.5689809,1.75089408 14.3721808,1 12,1 C5.92486775,1 1,5.92486775 1,12 C1,18.0751322 5.92486775,23 12,23 C18.0751322,23 23,18.0751322 23,12"
        id="Path"
        class="stroke-anim"
        stroke="var(--input-validation-success, #008800)"
        stroke-width="2"
        stroke-dasharray="60"
        stroke-dashoffset="60"
      ></path>
    </g>
  </svg>

  <svg *ngIf="type === 'error'" class="flex-no-shrink" viewBox="0 0 24 24" [ngStyle]="{ 'max-width.px': size || 64 }">
    <g id="Artboard-Copy-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <line
        x1="12"
        y1="13.5356315"
        x2="12"
        y2="7"
        id="Path-2"
        stroke="var(--input-validation-error, #E0000E)"
        class="symbol-anim"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-dasharray="7"
        stroke-dashoffset="7"
      ></line>
      <line
        x1="12"
        y1="17.7678157"
        x2="12"
        y2="17.2321843"
        id="Path-2"
        stroke="var(--input-validation-error, #E0000E)"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-dasharray="7"
        stroke-dashoffset="7"
        class="symbol-anim"
      ></line>
      <circle
        id="Oval"
        stroke="var(--input-validation-error, #E0000E)"
        stroke-width="2"
        cx="12"
        cy="12"
        r="11"
        class="stroke-anim"
        stroke-dasharray="70"
        stroke-dashoffset="70"
        stroke-linejoin="round"
      ></circle>
    </g>
  </svg>

  <svg *ngIf="type === 'warning'" class="flex-no-shrink" viewBox="0 0 24 24" [ngStyle]="{ 'max-width.px': size || 64 }">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <line
        x1="12"
        y1="13.5356315"
        x2="12"
        y2="7"
        id="Path-2"
        stroke="var(--input-validation-warning, #FF801F)"
        class="symbol-anim"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-dasharray="7"
        stroke-dashoffset="7"
      ></line>
      <line
        x1="12"
        y1="17.7678157"
        x2="12"
        y2="17.2321843"
        id="Path-2"
        stroke="var(--input-validation-warning, #FF801F)"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-dasharray="7"
        stroke-dashoffset="7"
        class="symbol-anim"
      ></line>

      <g
        fill-rule="nonzero"
        stroke="var(--input-validation-warning, #FF801F)"
        stroke-width="2"
        class="stroke-anim"
        stroke-dashoffset="1000"
        stroke-dasharray="90"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-linejoin="round"
      >
        <path d="M12,1 L23,21 L1,21 L12,1 Z" id="Path"></path>
      </g>
    </g>
  </svg>
  <p *ngIf="text" class="text-medium animated fadeIn delay-05 m-8" [ngClass]="{ 'text-center': vertical }">
    {{ text }}
  </p>
</div>