.ui-swiper-buttons {
  display: flex;
  gap: 10px;
  .swiper-button {
    &-prev,
    &-next {
      position: relative;
      right: 0;
      left: 0;
      width: 18px;
      height: 18px;
      margin: 0;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 8px 12px;
      &::after {
        display: none;
      }
    }
    &-prev {
      background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.625 11.25 1.375 6 6.625.75' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    &-next {
      background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.375.75 6.625 6l-5.25 5.25' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
  }
}
.ui-swiper-pagination {
  .swiper-pagination {
    position: relative;
    bottom: auto;
    line-height: 0;
    &-bullet {
      width: 6px;
      height: 6px;
      transition: 0.3s;
      &-active {
        width: 18px;
        border-radius: 3px;
        background-color: $primary1;
      }
    }
  }
}
.ui-swiper-bullets {
  margin-top: 45px;
  @include media-tablet {
    margin-top: 25px;
  }
  .swiper-pagination {
    position: relative;
    bottom: 0;
    font-size: 0;
    &-horizontal {
      .swiper-pagination-bullet {
        margin: 0 6px;
      }
    }
    &-bullet {
      position: relative;
      width: 30px;
      height: 4px;
      border-radius: 0;
      transition: 0.3s;
      opacity: 1;
      .anim {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: scaleX(0);
        transform-origin: left;
        background: red;
        transition-timing-function: linear;
        &--active {
          transform: scaleX(1);
        }
      }
      &-active {
        width: 60px;
      }
    }
  }
}
.ui-swiper-fraction {
  .swiper-pagination {
    position: relative;
    bottom: auto;
    display: flex;
    align-items: center;
    &-current {
      font: 22px/1.6 $font;
      color: red;
      @include media-tablet {
        font-size: 18px;
      }
    }
    &-progress {
      position: relative;
      width: 18px;
      height: 1px;
      margin: 0 7px;
      background-color: #d1c9be;
      &-line {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background-color: red;
        transition-timing-function: linear;
        &--active {
          width: 100%;
        }
      }
    }
    &-total {
      margin-top: 5px;
      font: 300 16px/1.5 $font;
      @include media-tablet {
        margin-top: 3px;
        font-size: 15px;
      }
    }
  }
}
