changing the color of the ion-segment active button

i am trying to change the color of the active segment button but with all options it still renders as white.

here is the html and css

ion-segment {
      background-color: #108453
      ion-segment-button {
        color: #108453;
      }
      
      .segment-button-checked {
          color: black !important; // it works properly 
          background-color: #108453 !important; 
          --indicator-color : transparent!important;
        }
      }

html

 <ion-segment color="primary" value="present" swipeGesture=false scrollable=true style="margin-left: 10px;margin-right: 10px;">
      <ion-segment-button value="present" content-id="present">
        <ion-label>Present</ion-label>
      </ion-segment-button>
      <ion-segment-button value="future" content-id="future">
        <ion-label>Future</ion-label>
      </ion-segment-button>
    </ion-segment>
    <ion-segment-view>
      <ion-segment-content id="present">
      </ion-segment-content>
      <ion-segment-content id="future">
      </ion-segment-content>
    </ion-segment-view>

how to change the active button color to #108453

A semicolon is missing after background-color: #108453