@use "../abstracts/" as *;

/* Swiper
-------------------------------------------------------------- */
/* animation slider */

.swiper-container {
  &:hover {
    cursor: ew-resize;
  }
}

.timing-function {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.swiper-container {
  &.mySwiper1.visible {
    overflow: visible;
  }
}

.swiper-btn {
  position: absolute;
  border-radius: 50%;
  background-color: $color-main;
  width: 78px;
  height: 78px;
  @include flex(center, center);
  z-index: 5;

  svg {
    width: 40px;
    height: 40px;

    path {
      @include transition3;
      fill: $white;
    }
  }

  &.swiper-button-disabled,
  &:hover {
    background-color: $white;
    box-shadow: 0px 0px 18.27px 2.73px rgba(0, 0, 0, 0.2);

    svg {
      path {
        fill: $color-3;
      }
    }
  }

  &.reverse {
    svg {
      transform: rotate(180deg);
    }
  }

  &.btn-next-product,
  &.btn-prev-product {
    top: 50%;
    transform: translateY(-50%);
  }

  &.btn-prev-product {
    left: 40px;
  }

  &.btn-next-product {
    right: 40px;
  }
}

.btn-slider {
  .ic-slider {
    @include transition3;
    @include flex(center, center);
    background-color: $black;
    width: 66px;
    height: 65px;
    border-radius: 50%;

    svg {
      width: 40px;
      height: 40px;

      path {
        @include transition3;
        fill: $white;
      }
    }

    opacity: 1;

    &.swiper-button-disabled {
      opacity: 0.5;
    }

    &:hover {
      background-color: $color-4;
    }
  }
}

.mySwiper2 {
  .swiper-slide {
    border-right: 1px dashed rgba(239, 239, 239, 0.2);

    &:last-child {
      border: none;
    }
  }
}

.swiper-prev-testimonial,
.swiper-next-testimonial {
  z-index: 9;
}

.swiper-btn {
  @include transition3;

  &.btn-prev-product-5,
  &.btn-next-product-5,
  &.btn-next-team,
  &.btn-prev-team {
    svg {
      path {
        @include transition3;
      }
    }

    &.reverse {
      svg {
        transform: rotate(0) !important;
      }
    }

    width: 62px;
    height: 62px;

    svg {
      width: 35px;
      height: 35px;
    }
  }
}

.sl-product-wrapper {
  max-width: 1370px;
  padding: 0 86px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;

  &.sl-product-wrapper {
    max-width: 1730px;
    padding: 0 80px;
  }
}

.wrapper-product-6 {
  margin: 0 auto;
  max-width: 1170px;
  width: 100%;
}

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