
@r-arrow-v-position: 0px;
@l-arrow-v-position: 0px;
@r-arrow-h-position: 10px;
@l-arrow-h-position: 10px;

.nav-v-position(@position, @offset) when (@position = top) {
    top: @offset;
}
.nav-v-position(@position, @offset) when (@position = center) {
    top: 50%;
    transform: translateY(calc(-50% ~'+' @offset));
    @media all and (-ms-high-contrast: none) {
      transform: translateY(-50%);
      margin-top: @offset;
    }
}
.nav-v-position(@position, @offset) when (@position = bottom) {
    top: auto;
    bottom: calc(0% ~'+' @offset);
}
.nav-centered(@position-v, @position-h, @offset-v, @offset-h) when (@position-v = center)and (@position-h = center)  {
    transform: translate3d(calc(-50% ~'+' @offset-h), calc(-50% ~'+' @offset-v), 0);
}
.nav-h-position(@position,@offset) when (@position = left) {
    left: @offset;
}
.nav-h-position(@position,@offset) when (@position = center) {
    left: 50%;
    transform: translateX(calc(-50% ~'+' @offset));
    @media all and (-ms-high-contrast: none) {
      transform: translateX(-50%);
      margin-left: @offset;
    }
}
.nav-h-position(@position,@offset) when (@position = right) {
    right: @offset;
}

.prev {
    .@{unique-shortcode-class-name} & {
      .nav-v-position(@arrow-left-v-position, @l-arrow-v-position);
      .nav-h-position(@arrow-left-h-position,@l-arrow-h-position);
      .nav-centered(@arrow-left-v-position, @arrow-left-h-position, @l-arrow-v-position, @l-arrow-h-position);
    }
}
.next {
   .@{unique-shortcode-class-name} & {
      .nav-v-position(@arrow-right-v-position, @r-arrow-v-position);
      .nav-h-position(@arrow-right-h-position,@r-arrow-h-position);
      .nav-centered(@arrow-right-v-position, @arrow-right-h-position, @r-arrow-v-position, @r-arrow-h-position);
  }
}
@media screen and (min-width:@elementor-sm-breakpoint + 1) and (max-width:@elementor-md-breakpoint){
  .@{unique-shortcode-class-name} .ts-ls-tb-fit .ts-wide.ts-ls img {
    width: auto;
    max-width: none;
    height: 50%;
    max-height: 50%;
  }
  .@{unique-shortcode-class-name} .ts-ls-tb-fit .ts-narrow.ts-ls img {
    width: 50%;
    max-width: 50%;
    height: auto;
    max-height: none;
  }

  .@{unique-shortcode-class-name} .ts-pt-tb-fit .ts-wide.ts-pt img {
    width: auto;
    max-width: none;
    height: 50%;
    max-height: 50%;
  }
  .@{unique-shortcode-class-name} .ts-pt-tb-fit .ts-narrow.ts-pt img {
    width: 50%;
    max-width: 50%;
    height: auto;
    max-height: none;
  }

  .@{unique-shortcode-class-name} .ts-pt-tb-fill .ts-wide.ts-pt img {
    width: 50%;
    max-width: 50%;
    height: auto;
    max-height: none;
  }
  .@{unique-shortcode-class-name} .ts-pt-tb-fill .ts-narrow.ts-pt img {
    width: auto;
    max-width: none;
    height: 50%;
    max-height: 50%;
  }

  .@{unique-shortcode-class-name} .ts-ls-tb-fill .ts-wide.ts-ls img {
    width: 50%;
    max-width: 50%;
    height: auto;
    max-height: none;
  }
 .@{unique-shortcode-class-name} .ts-ls-tb-fill .ts-narrow.ts-ls img {
    width: auto;
    max-width: none;
    height: 50%;
    max-height: 50%;
  }

}
@media screen and (max-width:@elementor-sm-breakpoint){

  .@{unique-shortcode-class-name} .ts-ls-mob-fit .ts-wide.ts-ls img {
    width: auto;
    max-width: none;
    height: 50%;
    max-height: 50%;
  }
  .@{unique-shortcode-class-name} .ts-ls-mob-fit .ts-narrow.ts-ls img {
    width: 50%;
    max-width: 50%;
    height: auto;
    max-height: none;
  }

  .@{unique-shortcode-class-name} .ts-pt-mob-fit .ts-wide.ts-pt img {
    width: auto;
    max-width: none;
    height: 50%;
    max-height: 50%;
  }
  .@{unique-shortcode-class-name} .ts-pt-mob-fit .ts-narrow.ts-pt img {
    width: 50%;
    max-width: 50%;
    height: auto;
    max-height: none;
  }

  .@{unique-shortcode-class-name} .ts-pt-mob-fill .ts-wide.ts-pt img {
    width: 50%;
    max-width: 50%;
    height: auto;
    max-height: none;
  }
  .@{unique-shortcode-class-name} .ts-pt-mob-fill .ts-narrow.ts-pt img {
    width: auto;
    max-width: none;
    height: 50%;
    max-height: 50%;
  }

  .@{unique-shortcode-class-name} .ts-ls-mob-fill .ts-wide.ts-ls img {
    width: 50%;
    max-width: 50%;
    height: auto;
    max-height: none;
  }
 .@{unique-shortcode-class-name} .ts-ls-mob-fill .ts-narrow.ts-ls img {
    width: auto;
    max-width: none;
    height: 50%;
    max-height: 50%;
  }
}
@media screen and (max-width: @hide-arrows-switch) {
  .scroller-arrow {
    .@{unique-shortcode-class-name} & {
        display: none;
    }
  }
}
@media screen and (max-width:@reposition-arrows-switch){
   .scroller-arrow {
    .@{unique-shortcode-class-name}.reposition-arrows & {
      &.prev {
        .nav-v-position(@arrow-left-v-position, @l-arrow-v-position);
        .nav-h-position(@arrow-left-h-position,@arrow-left-h-position-mobile);
        .nav-centered(@arrow-left-v-position, @arrow-left-h-position, @l-arrow-v-position, @arrow-left-h-position-mobile);
      }
      &.next {
        .nav-v-position(@arrow-right-v-position, @r-arrow-v-position);
        .nav-h-position(@arrow-right-h-position, @arrow-right-h-position-mobile);
        .nav-centered(@arrow-right-v-position, @arrow-right-h-position, @r-arrow-v-position,  @arrow-right-h-position-mobile);
      }
        
    }
  }
}