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

/* Desktop */
.main_gallery_hotel_container {
  z-index: 0;
}
.main_gallery_container {
    position:relative;
  /* 1200 */
  @media (min-width: $screen-lg-min) {
    max-width: 820px;
  }
  /* tablet */
  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    max-width: 740px;
  }
  /* mobile */
  @media (max-width:$screen-xs-max)  {
    max-width: $screen-xs-max;
    height: 218px;
  }
  .loader-inner {
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    &.ball-clip-rotate > div {
      width: 45px;
      height: 45px;
      border: 2px solid $brand-grey-dark;
      border-bottom-color: transparent;
    }
  }
  .arrow-nav-main {
    .main_gallery_arrow_prev,
    .main_gallery_arrow_next {
      height: 100%;
      z-index: 2;
    }
    .main_gallery_arrow_prev {
      position: absolute;
      background-image: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-ui-chevron-left-ffffff.svg'), none;
      background-repeat: no-repeat;
      background-position: 5%;
      background-size: inherit;
      width: 10%;
      filter: drop-shadow(0px 3px 5px #000);
      z-index: 2;
      cursor: pointer;
      left:5px;
    }
    .main_gallery_arrow_next {
      position: absolute;
      right: 5px;
      background-image: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-ui-chevron-right-ffffff.svg'), none;
      background-repeat: no-repeat;
      background-position: 95%;
      background-size: inherit;
      width: 10%;
      filter: drop-shadow(0px 3px 5px #000); /* Same syntax as box-shadow */
      z-index: 2;
      cursor: pointer;
    }
  }
  .main_gallery_default.owl-carousel {
    display: block !important;
    overflow: hidden;
    .owl-item {
      width: 100%;
    }
    .loader-inner {
      z-index: 1;
    }
    img {
      position: relative;
      z-index: 2;
    }
  }
  .picture_gallery_main.owl-loaded + .main_gallery_default {
    display: none !important;
  }
  .picture_gallery_main{
    &.owl-carousel {
      background:$brand-grey-medium;
      /* 1200 */
      @media (min-width: $screen-lg-min) {
        max-width:820px;
      }
      /* tablet */
      @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
        max-width:740px;
      }
      /* mobile */
      @media (max-width:$screen-xs-max)  {
        max-width:$screen-xs-max;
        height: 218px;
      }
      .owl-item {
        height:auto!important;
        /* 1200 */
        @media (min-width: $screen-lg-min) {
          max-height:560px;
        }
        /* tablet */
        @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
          max-height:506px;
        }
        /* mobile */
        @media (max-width:$screen-xs-max)  {
          max-height:218px;
        }
        .main_gallery_slide {
          text-align: center;
          padding: 0 !important;
          overflow: hidden;
          position: relative;
          @media (max-width:$screen-xs-max) {
            height: 218px;
          }
          /* trucos para alinear verticalmente la imagen grande */
          font-size: 0; //al bajar la fuente a 0 no habra espacio entre los elementos inline (el before y la imagen)
          &:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            width:0;
          }
          img {
            display: inline-block;
            text-align: left;
            vertical-align: middle;
            width: auto !important;
            max-width: 99.9%;
            margin: 0 auto;
            @media (max-width: $grid-float-breakpoint-max) and (orientation:landscape){
              position: absolute;
              top: 50%;
              left: 0;
              right: 0;
              transform: translateY(-50%);
            }
          }
        }
        .main_gallery_size_8 {
          /* 1200 */
          @media (min-width: $screen-lg-min) {
            max-width: 820px;
            height: 560px;
          }
          /* tablet */
          @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
            max-width: 740px;
            height:506px;
          }
          /* mobile */
          @media (max-width:$screen-xs-max)  {
            max-width: $screen-xs-max;
            height:218px !important;
          }
        }
        .main_gallery_size_7 {
          @media (max-width: $grid-float-breakpoint-max) and (orientation:portrait){
            img {
              //ancho minimo para la imagen de precarga de carrusel y la primera del carrusel que no tiene lazy
              & {
                min-width: 99.99%;
              }
              //loader
              &.lazy-load {
                min-width: 0;
                //ancho minimo para las imagenes cuando se hayan cargado tras lazy load
                &.lazy-load-loaded {
                  min-width: 99.99%;
                }
              }
            }
          }
        }
        .main_gallery_size_7,
        .main_gallery_size_6{
          .room_gallery_number{
            bottom:0;
          }
        }
      }
    }
    .room_gallery_number{
      position: absolute;
      z-index:15;
      bottom:75px;
      color:#FFF;
      left:20px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
      font-size:14px;
      @include medium-weight;
      span {
        font-size: 16px;
      }
    }
  }

  /* thumbnails */
  .cont_thumbs{
    position: absolute;
    bottom:0;
    width:100%;
    background: transparent;
    overflow:hidden;
    z-index: 5;
    .nav-prev{
      float: left;
      position: absolute;
      left: 0;
      bottom:9px;
      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:30px;
        height:48px;
        &.disabled{
          background:none;
          cursor:auto;
        }
      }
    }
    .nav-next{
      float: right;
      position: absolute;
      right: 0;
      bottom:9px;
      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: 30px;
        height: 48px;
        &.disabled {
          background: none;
          cursor: auto;
        }
      }
    }

    .picture_gallery_thumbs {
      &.owl-carousel {
        width: auto;
        padding: 0;
        position:relative;
        overflow:hidden;
        margin: 0 21px 0 20px;
        .owl-stage-outer {
          height:66px;
          padding-top:8px;
          .owl-stage{
            text-align: left;
            margin:0;
            .owl-item {
              /* 1200 */
              @media (min-width: $screen-lg-min) {
                width: 70px!important;
                margin-right: 18px !important;
              }
              /* tablet */
              @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
                width: 70px!important;
                margin-right: 18px !important;
              }
              .thumb_gallery_slide {
                text-align: center;
              }
              .selected img { border: 2px solid #fff;}
              img {
                border-radius: 6px;
                margin-bottom: 4px;
                width: auto !important;
                max-width: 100%;
                cursor: pointer;
                border: 2px solid transparent;
                display: inline-block;
                &:hover {
                  border: 2px solid #fff;
                }
              }
            }
          }
        }
      }
    }
  }

  &.main_gallery_size_8 {
    /* 1200 */
    @media (min-width: $screen-lg-min) {
      height: 560px;
    }
    /* tablet */
    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      height: 506px;
    }
    .picture_gallery_main {
      &.owl-carousel {
        .owl-item {
          .main_gallery_size_6,
          .main_gallery_size_7 {
            @media (min-width: $screen-lg-min) {
              height: 494px;
            }
            @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
              height: 440px;
            }
          }
        }
      }
    }
  }
  &.main_gallery_size_7,
  &.main_gallery_size_6 {
    /* 1200 y tablet */
    @media (min-width: $screen-sm-min) {
      height: 322px;
    }
    .picture_gallery_main {
      &.owl-carousel {
        .main_gallery_slide {
          /* 1200 y tablet */
          @media (min-width: $screen-sm-min) {
            height: 256px;
          }
        }
        .main_gallery_size_7 {
          img {
            @media (min-width: $screen-sm-min) {
              margin: 11px auto 0;
            }
          }
        }
      }
    }
    .cont_thumbs {
      background: $brand-grey-medium;
    }
  }
}


/* tablet */
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
  .main_gallery_container {
    /* thumbnails */
    .cont_thumbs{
      .nav-prev{
        display:none;
      }
      .nav-next{
        display: none;
      }
      .picture_gallery_thumbs.owl-carousel {
        margin: 0 0 0 5px;
      }
    }
  }
}
/* mobile */
@media (max-width:$screen-xs-max)  {
  .main_gallery_container {
    .picture_gallery_main{
      .room_gallery_number{
        bottom:10px;
      }
    }
  }
  .cont_thumbs{display: none;}
}