/*
 * owl-carousel.scss
 * -----------------------------------------------
*/

.owl-carousel {
  .tm-carousel-item {
    transition: .8s;
    -webkit-transition: .8s;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    opacity: 1;
    &.__loading {
      opacity: 0;
      transform: translateX(40px);
      -webkit-transform: translateX(40px);
    }
  }
  .owl-item img {
    display: inline-block;
    width: auto;
  }
  /* owl dots */
  .owl-dots {
    position: absolute;
    .owl-dot {
      display: inline-block;
      zoom: 1;
      span {
        background: #D6D6D6;
        display: block;
        height: 10px;
        margin: 5px 3px;
        opacity: 0.8;
        width: 10px;
        border-radius: 3px;
        @include transition( all .4s ease 0s);
      }
      &.active,
      &:hover {
        span {
          background: #869791;
        }
      }
    }
  }
  .owl-nav {
    position: absolute;
    button {
      border-radius: 0;
      display: inline-block;
      margin: 0;
      opacity: 0.3;
      z-index: 6;
      
      @include transition(all 0.4s ease 0s);

      i {
        vertical-align: middle;
      }
      &.owl-prev, &.owl-next {
        background: #fff;
        border-radius: 50%;
        color: var(--theme-color1);
        padding: 10px;
        width: 50px;
        height: 50px;
        opacity: 1;
        display:inline-flex;
        justify-content:center;
        align-items:center;
        @include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.08) );
        &:hover {
          background: var(--theme-color1);
          color: var(--text-color-bg-theme-color1);
        }
      }
      &.owl-prev {
        //left: -10px;
        margin-right: 15px
      }

      &.owl-next {
        left: 80px;
      }
    }

  }
  &:hover {
    .owl-nav {
      > button {
        &.owl-prev {
          //left: 20px;
        }

        &.owl-next {
          //right: 20px;
        }
      }
    }
  }
  &[data-focused-center-image="true"] {
    .owl-item {
      opacity: 0.3;
      @include transition(all 0.4s ease);
      &.active {
        opacity: 0.6;
        &.center {
          opacity: 1;
        }
      }
    }
  }
  &[data-zoomin-center-image="true"] {
    .owl-item {
      @include scale(0.9);
      @include transition(all 0.4s ease);
      &.active {
        &.center {
          @include scale(1);
        }
      }
    }
  }
}

.owl-nav-outer {
  .owl-nav {
    button {
      &.owl-prev, &.owl-next {
        background: rgba(240, 240, 240, 0.8);
        padding: 10px 15px;
      }
      &.owl-prev {
        left: -70px;
      }

      &.owl-next {
        right: -70px;
      }
      @include media-breakpoint-down(xl) {
        &.owl-prev {
          left: -25px;
        }

        &.owl-next {
          right: -25px;
        }
      }
    }

  }
}
/* Owl Dots */
.owl-dots-bottom-right .owl-dots {
  bottom: -10px;
  position: absolute;
  right: 0;
}
.owl-dots-center-bottom .owl-dots {
  bottom: 15px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

.owl-dots-left {
  .owl-dots {
    text-align: left;
  }
}

.owl-dots-center {
  .owl-dots {
    text-align: center;
  }
}

.owl-dots-right {
  .owl-dots {
    text-align: right;
  }
}


.owl-dots-light-skin {
  .owl-dots {
    .owl-dot {
      span {
        background: #D6D6D6;
      }
      &.active,
      &:hover {
        span {
          background: #fff;
        }
      }
    }
  }
}
.owl-dots-dark-skin {
  .owl-dots {
    .owl-dot {
      span {
        background: #333;
      }
      &.active,
      &:hover {
        span {
          background: #000;
        }
      }
    }
  }
}

//scroll in mobile device
.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y !important;
    touch-action: pan-y !important;
}