.gallery {
  img {
    width: 100%;
  }

  &__btn-prev,
  &__btn-next {
    @include button-slider;
    opacity: 0;

    @include media-breakpoint-down(md) {
      opacity: .5;
    }

    @include media-breakpoint-up(md) {
      .gallery_pdp & {
        display: none;
      }
    }
  }

  .swiper-container:hover &__btn-prev,
  .swiper-container:hover &__btn-next {
    @include media-breakpoint-up(lg) {
      opacity: .5;
    }
  }

  .swiper-container:hover &__btn-prev:hover,
  .swiper-container:hover &__btn-next:hover {
    opacity: 1;
  }

  &__btn-prev {
    left: 30px;

    @include media-breakpoint-down(sm) {
      left: 15px;
    }
  }

  &__btn-next {
    right: 30px;

    @include media-breakpoint-down(sm) {
      right: 15px;
    }
  }

  &__pagination {
    line-height: 6px;
    padding-top: 20px;
    text-align: center;

    @include media-breakpoint-up(md) {
      display: none;
    }
  }

  &__pagination-bullet {
    background: $gray-gray;
    border-radius: 100%;
    display: inline-block;
    height: 6px;
    margin: 0 3px;
    vertical-align: top;
    width: 6px;

    &_active {
      background: $blue;
    }
  }

  &__thumbs {
    width: calc(100% - 88px);

    //need for proper view of thumbs and don't crop the last one
    .gallery-pdp & {
      width: 262px; // 4*58px + 3*10px

      @include media-breakpoint-only(lg) {
        width: 228px; // 4*51px + 3*8px
      }
    }

    //need for proper view of thumbs and don't crop the last one
    .gallery_range & {
      width: 642px; // 9*58px + 8*15px

      @include media-breakpoint-only(md) {
        width: 602px; // 9*58px + 8*10px
      }

      @include media-breakpoint-only(lg) {
        width: 532px; // 9*52px + 8*8px
      }
    }

    &:not(.is-locked) .swiper-slide-active,
    &.is-locked .gallery__thumb_active {
      &::after {
        background-color: $white-transparent80;
        border: 2px solid $blue;
        bottom: 0;
        content: '';
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }

  &__thumb {
    cursor: pointer;
    height: 44px;
    width: 58px;

    .gallery-pdp & {
      margin-right: 10px;

      @include media-breakpoint-only(lg) {
        height: 39px;
        width: 51px;
        margin-right: 8px;
      }
    }

    .gallery-range & {
      margin-right: 15px;

      @include media-breakpoint-only(md) {
        margin-right: 10px;
      }

      @include media-breakpoint-only(lg) {
        margin-right: 8px;
        height: 40px;
        width: 52px;
      }
    }

    img {
      height: 100%;
      width: 100%;
    }
  }

  &_bordered {
    @include media-breakpoint-up(md) {
      border: 1px solid $gray;
    }
  }

  &__thumbs-wrapper {
    position: relative;
    padding: 20px 0;

    @include media-breakpoint-down(sm) {
      display: none;
    }
  }

  &_pdp {
    @include media-breakpoint-only(md) {
      width: 330px;
    }

    @include media-breakpoint-only(lg) {
      width: 290px;
    }

    @include media-breakpoint-up(xl) {
      width: 350px;
    }
  }
}

.thumbs {
  &__btn-prev,
  &__btn-next {
    @include button-thumbs;
  }

  &__btn-prev {
    left: 10px;

    .gallery-pdp & {
      //need for proper view of thumbs
      @include media-breakpoint-down(lg) {
        left: 5px;
      }
    }

    .gallery-range & {
      @include media-breakpoint-only(lg) {
        left: 5px;
      }
    }
  }

  &__btn-next {
    right: 10px;

    .gallery-pdp & {
      //need for proper view of thumbs
      @include media-breakpoint-down(lg) {
        right: 5px;
      }
    }

    .gallery-range & {
      @include media-breakpoint-only(lg) {
        right: 5px;
      }
    }
  }
}

.gallery_type1 {
  &__wrapper {
    width: 828px;
    max-width: 100%;
    margin: 0 auto;
  }

  .gallery__thumb {
    @include media-breakpoint-down(md) {
      height: 39px;
      width: 50px;
      margin-right: 5px;
    }
  }
}