@import '../vendor/owl/2.1.6/core';
@import '../vendor/owl/2.1.6/animate';
@import '../vendor/owl/2.1.6/lazyload';

/* Galería main */
.owl-carousel.availability_main_gallery {
  margin-top:14px;
  background:$brand-grey-medium;
  .owl-item{
    height:188px;
    vertical-align: middle;
    .main_gallery_slide {
      max-width: 100%;
      height: 188px;
      text-align: center;
      padding: 0 !important;
      overflow: hidden;
      font-size: 0;
      background:$brand-grey-medium;
      vertical-align: middle;
      &:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        width:0;
      }
      img {
        display: inline-block;
        width: auto !important;
        height: auto !important;
        text-align: left;
        vertical-align: middle;
        margin: 0 auto;
        max-width: 99.9% !important;
        max-height: 188px !important;
      }
    }
  }
  .owl-nav{
    .owl-prev {
      position: absolute;
      top: 80px;
      left:0;
      background-image:url("/headers/ilusion/"+ $assets-folder +"/dist/svg/icon-ownfill-ui-chevron-left-ffffff.svg"), none;
      background-repeat: no-repeat;
      background-position:50%;
      background-size:contain;
      width: 32px;
      height: 30px;
      -webkit-filter: drop-shadow( 0px 3px 5px #000 );
      filter: drop-shadow( 0px 3px 5px #000 ); /* Same syntax as box-shadow */
    }

    .owl-next {
      position: absolute;
      top: 80px;
      right:0;
      background-image:url("/headers/ilusion/"+ $assets-folder +"/dist/svg/icon-ownfill-ui-chevron-right-ffffff.svg"), none;
      background-repeat: no-repeat;
      background-position:50%;
      background-size:contain;
      width: 32px;
      height: 30px;
      filter: drop-shadow( 0px 3px 5px #000 ); /* Same syntax as box-shadow */
    }
  }
}
/*rtl:ignore*/
[dir='rtl'] .owl-carousel.availability_main_gallery .owl-nav .owl-prev{
  right:0;
  left:auto;
  transform: rotate(180deg);
}
/*rtl:ignore*/
[dir='rtl'] .owl-carousel.availability_.main_gallery_slide .owl-nav .owl-next {
  left:0;
  transform: rotate(180deg);
}

/* thumbs */
.gallery_availability {
  .cont_thumbs{
    background:$brand-grey-medium;
    overflow:hidden;
    margin: 0;
    padding: 0 35px;
    .nav-prev{
      position: absolute;
      left: 15px;
      bottom:20px;
      cursor:pointer;
      z-index: 10;

      .arrow-prev {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        background-image:url("/headers/ilusion/"+ $assets-folder +"/dist/svg/icon-ownfill-ui-chevron-left-ffffff.svg"), none;
        background-repeat: no-repeat;
        background-color: $brand-grey-dark;
        background-position:30% 50%;
        background-size: 38%;
        width:25px;
        height:30px;
        &.disabled{
          background:none;
        }
      }
    }
    .nav-next{
      position: absolute;
      right: 15px;
      bottom:20px;
      cursor:pointer;
      z-index: 10;
      .arrow-next {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        background-image: url("/headers/ilusion/"+ $assets-folder +"/dist/svg/icon-ownfill-ui-chevron-right-ffffff.svg"), none;
        background-repeat: no-repeat;
        background-color: $brand-grey-dark;
        background-position: 60% 50%;
        background-size: 38%;
        width: 25px;
        height: 30px;
        &.disabled {
          background: none;
        }
      }
    }
    .picture_gallery_thumbs {
      &.owl-carousel {
        width: auto;
        padding: 0;
        margin:0;
        .owl-stage-outer {
          height:70px;
          padding-top:10px;
          .owl-stage{
            .owl-item {
              .thumb_gallery_slide {
                text-align: center;
              }
              .selected img { border: 2px solid #fff;}
              img {
                border-radius: 6px;
                margin-bottom: 10px;
                border: 2px solid transparent;
                cursor: pointer;
                width: 65px;
                height: auto;
                &:hover {
                  border: 2px solid #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* tablet */
@media (min-width: $screen-sm) and (max-width: $screen-sm-max) {
  .gallery_availability {
    .cont_thumbs {
      .nav-prev,
      .nav-next {
        display: none;
      }
      .picture_gallery_thumbs {
        &.owl-carousel {
          &.picture_gallery_main {
            .owl-item {
              height: 162px;
            }
          }
        }
      }
    }
  }
}

/* mobile */
@media (max-width: $screen-xs-max) {

}