/* autoplay */

.autoplay-progress {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--swiper-theme-color);
}

.autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 4px;
  stroke: var(--swiper-theme-color);
  fill: none;
  stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}

/* with pagination */

.swiper.with--pagination .swiper-pagination {
  bottom: 80px;
}

.swiper.with--pagination .autoplay-progress {
  bottom: 60px;
  right: 20px;
}

.autoplay-progress svg {
  stroke-width: 2px;
  stroke: var(--color-swiper-loader);
}

.autoplay-progress span {
  color: var(--color-swiper-loader-counter);
}

.autoplay-progress {
  font-size: 13px;
  font-weight: 500;
}

.swiper-pagination-bullet {
  background: var(--color-swiper-bullet);
}

.swiper-pagination-bullet-active {
  background: var(--color-swiper-bullet-active);
}

.swiper-button-disabled {
  opacity: 0.3 !important;
}

/* swiper overflow */

.swiper-wrapper.with--overflow-y {
  margin-top: 50px;
}