.swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background-color: green;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  width: 14px;
  height: 14px;
  opacity: 1;
  background: transparent;
  margin: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: green;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination-bullet-active:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 20px;
  background-color: green;
}

.swiper-bg-light .swiper-pagination-bullet {
  background-color: var(--color-primary-500);
}

.swiper-bg-light .swiper-pagination-bullet-active {
  border-color: var(--color-primary-500);
  background-color: transparent;
}

.swiper-bg-light .swiper-pagination-bullet-active:before {
  background-color: var(--color-primary-500);
}

.swiper-bg-light .swiper-button-prev,
.swiper-bg-light .swiper-button-next {
  background-color: transparent;
}

.swiper-bg-light .swiper-button-prev:after,
.swiper-bg-light .swiper-button-next:after {
  color: var(--color-primary-500);
}

.swiper-bg-dark .swiper-pagination-bullet {
  background-color: var(--color-light-white);
}

.swiper-bg-dark .swiper-pagination-bullet-active {
  border-color: var(--color-light-white);
  background-color: transparent;
}

.swiper-bg-dark .swiper-pagination-bullet-active:before {
  background-color: var(--color-light-white);
}

.swiper-bg-dark .swiper-button-prev,
.swiper-bg-dark .swiper-button-next {
  background-color: transparent;
}

.swiper-bg-dark .swiper-button-prev:after,
.swiper-bg-dark .swiper-button-next:after {
  color: var(--color-light-white);
}