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;