@use '../../styles/mixin/mixin' as *;

$-swiper-nav-btn-size: var(--up-swiper-nav-btn-size, 60rpx) !default;
$-swiper-nav-btn-bg-color: var(--up-swiper-nav-btn-bg-color, var(--up-opacfilled-light-cover)) !default;
$-swiper-nav-btn-color: var(--up-swiper-nav-btn-color, var(--up-text-white)) !default;
$-swiper-nav-dot-size: var(--up-swiper-nav-dot-size, 16rpx) !default;
$-swiper-nav-dot-color: var(--up-swiper-nav-dot-color, var(--up-opacwhite-5_20)) !default;
$-swiper-nav-dot-active-color: var(--up-swiper-nav-dot-active-color, var(--up-base-white)) !default;
$-swiper-nav-dots-bar-active-width: var(--up-swiper-nav-dots-bar-active-width, 40rpx) !default;
$-swiper-nav-fraction-height: var(--up-swiper-nav-fraction-height, 48rpx) !default;
$-swiper-nav-fraction-bg-color: var(--up-swiper-nav-fraction-bg-color, var(--up-opacfilled-light-cover)) !default;
$-swiper-nav-fraction-color: var(--up-swiper-nav-fraction-color, var(--up-text-white)) !default;
$-swiper-nav-fraction-font-size: var(--up-swiper-nav-fraction-font-size, var(--up-typography-label-size-main)) !default;

@include b(swiper-nav) {
  @include e(btn) {
    @include m(prev, next) {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: $-swiper-nav-btn-size;
      height: $-swiper-nav-btn-size;
      border-radius: var(--up-radius-full);
      background: $-swiper-nav-btn-bg-color;
      &::after {
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        content: '';
        width: 12rpx;
        height: 12rpx;
        border-color: $-swiper-nav-btn-color;
        border-style: solid;
      }
    }
    @include m(prev) {
      left: 30rpx;
      &::after {
        margin-left: 4rpx;
        border-width: 2rpx 0 0 2rpx;
        transform: translate(-50%, -50%) rotateZ(-45deg);
      }
    }
    @include m(next) {
      right: 30rpx;
      &::after {
        margin-left: -4rpx;
        border-width: 2rpx 2rpx 0 0;
        transform: translate(-50%, -50%) rotateZ(45deg);
      }
    }
  }
  @include m(dots, dots-bar, line) { display: flex; flex-direction: row; }
  @include m(line) { width: 100%; padding: 0 var(--up-padding-extra-loose); }
  @include m(fraction) {
    padding: 0 var(--up-padding-extra-loose);
    height: $-swiper-nav-fraction-height;
    line-height: $-swiper-nav-fraction-height;
    border-radius: calc($-swiper-nav-fraction-height / 2);
    background: $-swiper-nav-fraction-bg-color;
    color: $-swiper-nav-fraction-color;
    font-size: $-swiper-nav-fraction-font-size;
  }
  @include e(item) {
    @include m(dots, dots-bar) {
      width: $-swiper-nav-dot-size;
      height: $-swiper-nav-dot-size;
      background: $-swiper-nav-dot-color;
      border-radius: 50%;
      margin: 0 var(--up-spacing-main);
      transition: all 0.4s ease-in;
      @include when(vertical) { margin: var(--up-spacing-main) 0; }
      @include when(active) { background-color: $-swiper-nav-dot-active-color; }
    }
    @include m(dots-bar) {
      @include when(vertical) {
        @include when(active) { width: $-swiper-nav-dot-size; height: $-swiper-nav-dots-bar-active-width; }
      }
      @include when(active) {
        width: $-swiper-nav-dots-bar-active-width;
        border-radius: calc($-swiper-nav-dot-size / 2);
        background-color: $-swiper-nav-dot-active-color;
      }
    }
    @include m(line) {
      flex: 1; height: 4rpx; background: var(--up-opacwhite-3_08); margin: 0 4rpx; border-radius: 4rpx; transition: all 0.3s ease;
      @include when(vertical) { width: 4rpx; height: auto; flex: 1; margin: 4rpx 0; }
      @include when(active) { background: var(--up-opacwhite-9_75); }
    }
  }
  @include m(left) { position: absolute; left: var(--up-padding-extra-loose); top: 50%; transform: translateY(-50%); }
  @include m(right) { position: absolute; right: var(--up-padding-extra-loose); top: 50%; transform: translateY(-50%); }
  @include m(top-left) { position: absolute; top: var(--up-padding-extra-loose); left: var(--up-padding-extra-loose); }
  @include m(top) { position: absolute; left: 50%; top: var(--up-padding-extra-loose); transform: translateX(-50%); }
  @include m(top-right) { position: absolute; top: var(--up-padding-extra-loose); right: var(--up-padding-extra-loose); }
  @include m(bottom-left) { position: absolute; left: var(--up-padding-extra-loose); bottom: var(--up-padding-extra-loose); }
  @include m(bottom) { position: absolute; left: 50%; bottom: var(--up-padding-extra-loose); transform: translateX(-50%); }
  @include m(bottom-right) { position: absolute; right: var(--up-padding-extra-loose); bottom: var(--up-padding-extra-loose); }
  @include m(vertical) { flex-direction: column; }
}