.breakdance-swiper-wrapper {
  --swiper-navigation-size: 20px;
  --swiper-pagination-color: #2563eb;
  --swiper-theme-color: #2563eb;
  --swiper-padding-h: 42px;

  position: relative;
  padding: 0 var(--swiper-padding-h);
  width: 100%;
}

.swiper {
  overflow: hidden;
  width: 100%;
}

.swiper-button-prev > svg,
.swiper-button-next > svg {
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  width: 100%;
}

.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  z-index: 10;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.swiper-button-prev {
  left: 12px;
}

.swiper-button-next {
  right: 12px;
}

/* Fixes a bug with Swiper adding bullets inside pagination when re-updating for some reason */
.swiper-button-prev .swiper-pagination-bullet {
  display: none;
}

.swiper-pagination {
  margin-top: 8px;
  position: initial;
}

.swiper-pagination,
.swiper-pagination-bullet {
  color: #2563eb;
}

.swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
  transition: opacity 0.2s ease-in;
  opacity: 0.4;
}

.swiper-pagination-bullet {
  background-color: #2563eb;
  margin: 0 4px !important;
  border-radius: 100%;
  bottom: initial;
}

.breakdance-swiper-wrapper .swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);

  /* Make sure to update the values in the preset CSS if these change*/
  /* make the progressbar match the slider's width when made smaller by the outside arrows */
  width: calc(100% - (var(--swiper-padding-h) * 2));
  left: var(--swiper-padding-h);
}