<ng-container *ngIf="size < 32">
  <button
    class="btn-clean p-0"
    style="max-width: {{size}}px"
    [attr.aria-label]="'Connection status' | translate"
    tooltip="{{
      !!status().maintenanceStatus
        ? (status().maintenanceStatus.tooltip | translate)
        : (status().sendStatus.tooltip | translate) + '\n' + ( status().pushStatus.tooltip | translate ) }}"
    placement="right"
    container="body"
    [adaptivePosition]="false"
    [delay]="500"
  >
    <svg
      style="max-width: {{ size }}px; min-width: 20px; pointer-events: none;"
      viewBox="0 0 90 90"
      fill="none"
    >
      <g *ngIf="!status().maintenanceStatus">
        <path
          class="sendStatus"
          [ngClass]="status().sendStatus.class"
          d="M45 3C21.804 3 3 21.804 3 45H87C87 21.804 68.196 3 45 3Z"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M67.0952 27.4943C67.0952 27.27 66.9967 27.0702 66.8472 26.9215L57.2702 18.1929C57.0221 17.9922 56.6974 17.9439 56.3974 18.0679C56.0982 18.1929 55.9231 18.4674 55.9231 18.7903V24.3768H24.7981C24.3493 24.3768 24 24.7262 24 25.1749V29.9634C24 30.4121 24.3493 30.7614 24.7981 30.7614H55.9231V36.3471C55.9231 36.6718 56.1237 36.9463 56.3974 37.0713C56.6974 37.1953 57.0221 37.1451 57.2702 36.9208L66.8472 28.0927C66.9967 27.944 67.0952 27.7196 67.0952 27.4943Z"
          fill="var(--c8y-palette-high)"
        />
      </g>
      <g *ngIf="!status().maintenanceStatus">
        <path
          d="M45 87C68.196 87 87 68.196 87 45L3 45C3 68.196 21.804 87 45 87Z"
          [ngClass]="status().pushStatus.class"
          class="pushStatus"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M23.9048 62.4943C23.9048 62.27 24.0033 62.0702 24.1528 61.9215L33.7298 53.1929C33.9779 52.9922 34.3026 52.9439 34.6026 53.0679C34.9018 53.1929 35.0769 53.4674 35.0769 53.7903V59.3768H66.2019C66.6507 59.3768 67 59.7262 67 60.1749V64.9634C67 65.4121 66.6507 65.7614 66.2019 65.7614H35.0769V71.3471C35.0769 71.6718 34.8763 71.9463 34.6026 72.0713C34.3026 72.1953 33.9779 72.1451 33.7298 71.9208L24.1528 63.0927C24.0033 62.944 23.9048 62.7196 23.9048 62.4943Z"
          fill="var(--c8y-palette-high)"
        />
      </g>
      <g *ngIf="!!status().maintenanceStatus">
        <path 
          class="maintenanceStatus"
          d="M45.5 88C68.9721 88 88 68.9721 88 45.5C88 22.0279 68.9721 3 45.5 3C22.0279 3 3 22.0279 3 45.5C3 68.9721 22.0279 88 45.5 88Z"
          fill="var(--c8y-palette-status-warning)"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M66.7 32.6935C66.7 33.6665 66.346 34.8755 66.021 35.8195C64.163 41.0685 59.119 44.6975 53.544 44.6975C46.259 44.6975 40.33 38.7685 40.33 31.4835C40.33 24.1985 46.259 18.2695 53.544 18.2695C55.698 18.2695 58.499 18.9175 60.299 20.1275C60.593 20.3345 60.77 20.6005 60.77 20.9535C60.77 21.2785 60.563 21.6005 60.299 21.7795L51.656 26.7625V33.3685L57.349 36.5245C58.322 35.9635 65.165 31.6595 65.754 31.6595C66.346 31.6615 66.7 32.1035 66.7 32.6935ZM48 45.5225L27.886 65.6375C27.207 66.3165 26.234 66.7295 25.23 66.7295C24.228 66.7295 23.254 66.3165 22.546 65.6375L19.421 62.4515C18.713 61.7735 18.299 60.8005 18.299 59.7975C18.299 58.7955 18.712 57.8225 19.421 57.1125L39.506 37.0295C41.04 40.8935 44.137 43.9895 48 45.5225ZM29.006 57.9105C29.006 56.8785 28.151 56.0235 27.118 56.0235C26.085 56.0235 25.23 56.8775 25.23 57.9105C25.23 58.9435 26.085 59.7975 27.118 59.7975C28.15 59.7975 29.006 58.9425 29.006 57.9105Z"
          fill="var(--c8y-palette-high)"
        />
      </g>

      <path
        d="M88 45C88 68.7482 68.7482 88 45 88C21.2518 88 2 68.7482 2 45C2 21.2518 21.2518 2 45 2C68.7482 2 88 21.2518 88 45Z"
        stroke="var(--c8y-root-component-border-color)"
        stroke-width="4"
        stroke-miterlimit="10"
      />
    </svg>
  </button>
</ng-container>
<ng-container *ngIf="size >=32">
  <svg
    style="max-width: {{ size }}px; min-width: 20px;"
    viewBox="0 0 90 90"
    class="d-inline-block"
    fill="none"
  >
    <g
      tooltip="{{ status().sendStatus.tooltip | translate }}"
      [delay]="500"
      container="body"
      *ngIf="!status().maintenanceStatus"
    >
      <path
        class="sendStatus"
        d="M45 3C21.804 3 3 21.804 3 45H87C87 21.804 68.196 3 45 3Z"
        [ngClass]="status().sendStatus.class"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M67.0952 27.4943C67.0952 27.27 66.9967 27.0702 66.8472 26.9215L57.2702 18.1929C57.0221 17.9922 56.6974 17.9439 56.3974 18.0679C56.0982 18.1929 55.9231 18.4674 55.9231 18.7903V24.3768H24.7981C24.3493 24.3768 24 24.7262 24 25.1749V29.9634C24 30.4121 24.3493 30.7614 24.7981 30.7614H55.9231V36.3471C55.9231 36.6718 56.1237 36.9463 56.3974 37.0713C56.6974 37.1953 57.0221 37.1451 57.2702 36.9208L66.8472 28.0927C66.9967 27.944 67.0952 27.7196 67.0952 27.4943Z"
        fill="var(--c8y-palette-high)"
      />
    </g>
    <g
      tooltip="{{ status().pushStatus.tooltip | translate }}"
      [delay]="500"
      container="body"
      *ngIf="!status().maintenanceStatus"
    >
      <path
        d="M45 87C68.196 87 87 68.196 87 45L3 45C3 68.196 21.804 87 45 87Z"
        [ngClass]="status().pushStatus.class"
        class="pushStatus"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M23.9048 62.4943C23.9048 62.27 24.0033 62.0702 24.1528 61.9215L33.7298 53.1929C33.9779 52.9922 34.3026 52.9439 34.6026 53.0679C34.9018 53.1929 35.0769 53.4674 35.0769 53.7903V59.3768H66.2019C66.6507 59.3768 67 59.7262 67 60.1749V64.9634C67 65.4121 66.6507 65.7614 66.2019 65.7614H35.0769V71.3471C35.0769 71.6718 34.8763 71.9463 34.6026 72.0713C34.3026 72.1953 33.9779 72.1451 33.7298 71.9208L24.1528 63.0927C24.0033 62.944 23.9048 62.7196 23.9048 62.4943Z"
        fill="var(--c8y-palette-high)"
        style="pointer-events: none;"
      />
    </g>
    <g
      tooltip="{{ status().maintenanceStatus.tooltip | translate }}"
      [delay]="500"
      container="body"
      *ngIf="!!status().maintenanceStatus"
    >
      <path 
        d="M45.5 88C68.9721 88 88 68.9721 88 45.5C88 22.0279 68.9721 3 45.5 3C22.0279 3 3 22.0279 3 45.5C3 68.9721 22.0279 88 45.5 88Z"
        fill="var(--c8y-palette-status-warning)"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M69.7 35.6935C69.7 36.6665 69.346 37.8755 69.021 38.8195C67.163 44.0685 62.119 47.6975 56.544 47.6975C49.259 47.6975 43.33 41.7685 43.33 34.4835C43.33 27.1985 49.259 21.2695 56.544 21.2695C58.698 21.2695 61.499 21.9175 63.299 23.1275C63.593 23.3345 63.77 23.6005 63.77 23.9535C63.77 24.2785 63.563 24.6005 63.299 24.7795L54.656 29.7625V36.3685L60.349 39.5245C61.322 38.9635 68.165 34.6595 68.754 34.6595C69.346 34.6615 69.7 35.1035 69.7 35.6935ZM51 48.5225L30.886 68.6375C30.207 69.3165 29.234 69.7295 28.23 69.7295C27.228 69.7295 26.254 69.3165 25.546 68.6375L22.421 65.4515C21.713 64.7735 21.299 63.8005 21.299 62.7975C21.299 61.7955 21.712 60.8225 22.421 60.1125L42.506 40.0295C44.04 43.8935 47.137 46.9895 51 48.5225ZM32.006 60.9105C32.006 59.8785 31.151 59.0235 30.118 59.0235C29.085 59.0235 28.23 59.8775 28.23 60.9105C28.23 61.9435 29.085 62.7975 30.118 62.7975C31.15 62.7975 32.006 61.9425 32.006 60.9105Z"
        fill="var(--c8y-palette-high)"
        style="pointer-events: none;"
      />
    </g>

    <path
      d="M88 45C88 68.7482 68.7482 88 45 88C21.2518 88 2 68.7482 2 45C2 21.2518 21.2518 2 45 2C68.7482 2 88 21.2518 88 45Z"
      stroke="var(--c8y-root-component-border-color)"
      stroke-width="4"
      stroke-miterlimit="10"
    />
  </svg>
</ng-container>