Change bottom property of ion-modal

Ionic Framework
1

i have the following modal

<ion-modal [isOpen]="isModalOpen"  [backdropDismiss]="false">
  <ng-template>
  
    <ion-content class="ion-padding-start">

      <ion-list>
        <ion-item (click)="Orders(1)">
          <ion-icon name="reorder-four-outline"></ion-icon>
          <ion-label class="ion-padding-start">
                all
          </ion-label>
        </ion-item>

         <ion-item (click)="Orders(2)">
          <ion-icon name="download-outline"></ion-icon>
            <ion-label class="ion-padding-start">
              new orders
            </ion-label>
          </ion-item>


           <ion-item (click)="Orders(3)">
            <ion-icon name="checkmark-outline"></ion-icon>
              <ion-label class="ion-padding-start">
                accepted orders
              </ion-label>
           </ion-item>
      </ion-list>
    </ion-content>
  </ng-template>
</ion-modal>

this modal appears when clicking on tab1, so i want it in the bottom left corner of screen. i succeeded with that with top property, but that’s not what i want , i want to use bottom property to exclude tabs height. bottom property doesn’t take any effect

ion-modal {
  position:absolute;
  width: 60% !important;
  height: 350px !important;
  top: calc(50% - (60px)); // 60 is tabs height but with top property it will change in different screens , i want it to be bottom: 60px;
  right:calc(100% - 65%); 
    --border-radius: 16px;
    --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }

Capture

2

Use modalcontroller.