@if (totpInfo$ | async; as totpInfo) {
  <ng-container>
    <div class="tw-flex tw-items-center tw-justify-center">
      <span class="tw-relative tw-flex tw-justify-center tw-items-center" aria-hidden="true">
        <span
          class="tw-absolute"
          [ngClass]="{ 'tw-text-main': !totpInfo.totpLow, 'tw-text-danger': totpInfo.totpLow }"
          bitTypography="helper"
          >{{ totpInfo.totpSec }}</span
        >
        <svg class="tw-size-7" transform="rotate(-90)" viewBox="0 0 28 28">
          <g>
            <circle
              class="tw-fill-none"
              [ngClass]="{
                'tw-stroke-text-main': !totpInfo.totpLow,
                'tw-stroke-danger-600': totpInfo.totpLow,
              }"
              r="9.5"
              cy="14"
              cx="14"
              stroke-width="2"
              stroke-dasharray="60"
              [ngStyle]="{ 'stroke-dashoffset.px': totpInfo.totpDash }"
            ></circle>
            <circle
              class="tw-fill-none"
              [ngClass]="{
                'tw-stroke-text-main': !totpInfo.totpLow,
                'tw-stroke-danger-600': totpInfo.totpLow,
              }"
              r="11"
              cy="14"
              cx="14"
              stroke-width="1"
              stroke-dasharray="71"
              stroke-dashoffset="0"
            ></circle>
          </g>
        </svg>
      </span>
    </div>
  </ng-container>
}