Angular: How to change the style of ng-bootstrap pagination component

Question

I'm using an ng-bootstrap pagination component but I need to change his style from this: ng-bootstrap pagination to this: enter image description here (or something like that). I don't know if it's possible and how to do that, but if it's can someone help me, please?!

Site of ng-bootstrap pagination component: https://ng-bootstrap.github.io/#/components/pagination/examples

component.html

<ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [boundaryLinks]="true" [pageSize]="pageSize" (pageChange)="refreshContent()">
      <ng-template ngbPaginationPages let-page let-pages="pages">
        <li class="ngb-custom-pages-item" *ngIf="pages.length > 0">
          <div class="mb-3 d-flex flex-nowrap px-2">
            <label id="paginationInputLabel" for="paginationInput" class="col-form-label me-2 ms-1">Page</label>
            <input
              #i
              type="text"
              inputmode="numeric"
              pattern="[0-9]*"
              class="form-control custom-pages-input"
              id="paginationInput"
              [value]="page"
              (keyup.enter)="selectPage(i.value)"
              (blur)="selectPage(i.value)"
              (input)="formatInput($any($event).target)"
              aria-labelledby="paginationInputLabel paginationDescription"
              style="width: 2.5rem"
            />
            <span id="paginationDescription" class="col-form-label text-nowrap px-2"> of {{pages.length}}</span>
          </div>
        </li>
      </ng-template>
    </ngb-pagination>