@nav_arrow_size: 25px;

// Color field
.vc_grid_nav_color_variants(@selector, @txt_color) {
  &.vc_grid-owl-nav-color-@{selector} {
    color: @txt_color !important;
  }
}

.vc_grid-gutter-nav(@gutter, @margin) {
  &.vc_grid-gutter-@{gutter} {
    .vc_grid-owl-nav {
      .vc_grid-owl-prev,
      .vc_grid-owl-next {
        margin-top: -@margin;
      }
    }
  }
}

&.vc_grid-owl-theme {
  &:hover {
    .vc_grid-owl-nav {
      .opacity(1.0);
    }
  }
  .vc_grid-owl-nav {
    cursor: pointer;
    .opacity(0);
    .transition(opacity 0.3s ease-in 0s);
    -webkit-tap-highlight-color: transparent;

    .disabled {
      display: none !important;
    }

    .vc_grid-owl-prev,
    .vc_grid-owl-next {
      position: absolute;
      top: 50%;
      margin-top: (-@nav_arrow_size / 2);

      .opacity(0.5);
      font-size: @nav_arrow_size;
      line-height: @nav_arrow_size;
      height: @nav_arrow_size;
      display: inline-block;
      text-decoration: none;
      cursor: pointer;
      .transition(opacity 0.3s ease-in 0s);

      &:hover {
        .opacity(1.0);
      }
    }

    .vc_grid-owl-prev {
      left: 5px;
      &.vc_grid-nav-prev-outside {
        left: -30px;
      }
    }

    .vc_grid-owl-next {
      right: 5px;
      &.vc_grid-nav-next-outside {
        right: -30px;
      }
    }

    .vc_grid_nav_color_variants(~'blue', @blue);
    .vc_grid_nav_color_variants(~'turquoise', @turquoise);
    .vc_grid_nav_color_variants(~'pink', @pink);
    .vc_grid_nav_color_variants(~'violet', @violet);
    .vc_grid_nav_color_variants(~'peacoc', @peacoc);
    .vc_grid_nav_color_variants(~'chino', @chino);
    .vc_grid_nav_color_variants(~'mulled_wine', @mulled_wine);
    .vc_grid_nav_color_variants(~'vista_blue', @vista_blue);
    .vc_grid_nav_color_variants(~'black', @black);
    .vc_grid_nav_color_variants(~'grey', @grey);
    .vc_grid_nav_color_variants(~'orange', @orange);
    .vc_grid_nav_color_variants(~'sky', @sky);
    .vc_grid_nav_color_variants(~'green', @green);
    .vc_grid_nav_color_variants(~'juicy_pink', @juicy_pink);
    .vc_grid_nav_color_variants(~'sandy_brown', @sandy_brown);
    .vc_grid_nav_color_variants(~'purple', @purple);
    .vc_grid_nav_color_variants(~'white', @white);
  }

  .vc_grid-gutter-nav(1px, (@nav_arrow_size/2 + 1px/2));
  .vc_grid-gutter-nav(2px, (@nav_arrow_size/2 + 2px/2));
  .vc_grid-gutter-nav(3px, (@nav_arrow_size/2 + 3px/2));
  .vc_grid-gutter-nav(4px, (@nav_arrow_size/2 + 4px/2));
  .vc_grid-gutter-nav(5px, (@nav_arrow_size/2 + 5px/2));
  .vc_grid-gutter-nav(10px, (@nav_arrow_size/2 + 10px/2));
  .vc_grid-gutter-nav(15px, (@nav_arrow_size/2 + 15px/2));
  .vc_grid-gutter-nav(20px, (@nav_arrow_size/2 + 20px/2));
  .vc_grid-gutter-nav(25px, (@nav_arrow_size/2 + 25px /2));
  .vc_grid-gutter-nav(30px, (@nav_arrow_size/2 + 30px /2));
  .vc_grid-gutter-nav(35px, (@nav_arrow_size/2 + 35px /2));
}
