Styling pagination bullets before the active bullet

[ozimas]

I use:
"react": "^18.2.0"
"swiper": "^11.0.5"

The version I have:

The version I want to achieve:

Part code JS:

import { useRef } from 'react';
import { register } from 'swiper/element/bundle';
register();

function Swiper() {
  const swiperElRef = useRef(null);
  ...

  return <swiper-container
    ref={swiperElRef}
    className="swiper"
    pagination="true"
    hash-navigation="true"
    space-between="16"
    lazy-preload-prev-next={2}
  >
    <swiper-slide lazy="true" data-hash={1}>...</swiper-slide>
    ...
  </swiper-container>
}

pagination / bullet CSS:

swiper-container::part(pagination) {
  width: calc(100% + 8px);
  top: -12px;
  left: -4px;
  bottom: auto;
  display: flex;
}

swiper-container::part(bullet), swiper-container::part(bullet-active)  {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: #828181;
  opacity: 1;
}

swiper-container::part(bullet-active) {
  background: #FFFFFF;
}

I would like all items before the active one to be in white color. I tried the code below, but it doesn't work. How can I accomplish this?

// not working
swiper-container::part(bullet-active) ~ swiper-container::part(bullet) {
  background: #FFFFFF;
}