How to remove tab-bar padding?

download

How can I remove paddings from start and end of ion-tab-bar?

Code

HTML

<ion-tabs>
  <ion-tab-bar class="myTabs" slot="bottom">
    <ion-tab-button tab="groups">
      <ion-icon name="chatbubbles-outline"></ion-icon>
      <ion-label>Chat</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings-outline"></ion-icon>
      <ion-label>Pengaturan</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

CSS

.myTabs {
    --background: #f1c40f;
}

.tab-has-label {
    --background: none;
    --color-selected: #2c3e50;
    --color: #718093;
}

.tab-selected {
    --background: #e1b12c;
}

Any idea?

nobody has solution?

Have you tried to remove the padding from the button? That should be the case.

ion-tab-button{
    --padding-start: 0px;
    --padding-end: 0px;
}

Unfortunately that doesn’t work.