.custom-mixin-color (@customColor) when (iscolor(@customColor)) {
  color: @customColor;
  background: none;
}

.custom-mixin-bg (@customColor) when (iscolor(@customColor)) {
  background: @customColor;
}

.custom-mixin-border (@customColor) when (iscolor(@customColor)) {
  border-color: @customColor;
}

.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: calc(100% ~'+' @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;
}

.owl-nav {
  & a {
    width: @arrow-width;
    height: @arrow-height;
    border-radius: @arrow-border-radius;

    &:not(:hover):before {
      .dt-arrow-border-on& {
        border-width: @arrow-border-width;
      }
    }

    &:hover:after {
      .dt-arrow-hover-border-on& {
        border-width: @arrow-border-width;
      }
    }

    &:not(:hover):before {
      .dt-arrow-border-on& {
        .custom-mixin-border (@arrow-border-color);
      }
    }

    .arrows-bg-on& {
      &:before {
        .custom-mixin-bg (@arrow-bg);
      }
    }

    .arrows-hover-bg-on& {
      &:after {
        .custom-mixin-bg (@arrow-bg-hover);
      }
    }

    &:hover:after {
      .dt-arrow-hover-border-on& {
        .custom-mixin-border (@arrow-border-color-hover);
      }
    }

    &.owl-prev {
      .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);

      & i {
        padding: @l-icon-padding-top @l-icon-padding-right @l-icon-padding-bottom @l-icon-padding-left;
      }
    }

    &.owl-next {
      .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);

      & i {
        padding: @r-icon-padding-top @r-icon-padding-right @r-icon-padding-bottom @r-icon-padding-left;
      }
    }
  }

  & i {
    font-size: @icon-size;
  }

  & a:not(:hover) i,
  & a:not(:hover) i:before {
    .custom-mixin-color (@icon-color);
  }

  & a:hover i,
  & a:hover i:before {
    .custom-mixin-color (@icon-color-hover);
  }
}

@media screen and (max-width: @hide-arrows-switch) {
  .hide-arrows .owl-nav a {
      display: none;
  }
}

@media screen and (max-width: @reposition-arrows-switch) {
  .reposition-arrows .owl-nav {
    .owl-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);
    }

    .owl-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);
    }
  }
}