Change bottom property of ion-modal

i have the following modal

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

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

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

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

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 {
  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);


Use modalcontroller.