Ion Tab bar color only colors the area with buttons

I have the following Tab Bar:

               <IonTabBar slot='bottom'>
                    <IonTabButton tab='Activity' href='/activity'>
                        <IonIcon icon={listOutline} />

                    <IonTabButton tab='Discover' href='/discover'>
                        <IonIcon icon={searchOutline}/>

                    <IonTabButton tab='Profile' href='/profile'>
                        <IonIcon icon={personOutline}/>

I am styling it like this (because I will have a different color in dark mode):

:root {
  --ion-background-color: #d9ebf2;
  --ion-tabbar-background-color: #82c513;

  --background: var(--ion-tabbar-background-color);


The result is this:

you can see it only colors where the buttons are but it is the normal background color outside of it. How do I color the entire tab bar?

Weird I fired it up today and it looks good now. Didn’t change anything.