Set swiper-pagination-bullet width to fill out the space

I’m trying to style swiper pagination bullet of swiperjs inside my ionic app to look like this:

At the moment I got this result setting width to 30% since there are just three bullets. Without specifying the value the bullets look like this.

But I need to get the result of the first picture event with a different number of bullets.
This is the css code I add inside the global.scss file.

.swiper-pagination-bullet-active {
  background: #863339;
  opacity: 0.4 !important;
}

.swiper-pagination-bullet {
  width: 30%; // I need to fix this to adapt with every possible number of bullets
  color: gray;
  opacity: 0.2;
  height: 5px;
  border-radius: 0px;
}

.swiper-pagination {
  top: 0px;
  height: min-content;
}

1 post - 1 participant

Read full topic