// variables
$skeleton-grey: #ededed;
// brillo
$brillo-image: linear-gradient( 90deg, rgba(#fff, 0), rgba(#fff, 0.5) 50%, rgba(#fff, 0) 100% );
$brillo-size: 50% 100%;
$brillo-position-start: -100% 0;
$brillo-position-end: 150% 0;

// titulo componente
$componenttitletext-image: linear-gradient(90deg, rgba(237,237,237,1) 0%, rgba(237,237,237,1) 60px, rgba(255,255,255,1) 61px, rgba(255,255,255,1) 100%);
$componenttitletext-transparentimage: linear-gradient(90deg, rgba(237,237,237,1) 0%, rgba(237,237,237,1) 60px, rgba(255,255,255,0) 61px, rgba(255,255,255,0) 100%);
$componenttitletext-position: 15px 15px;
$componenttitletext-size: 100% 6px;

// texto componente
$componenttext-image: linear-gradient(180deg, rgba($skeleton-grey,1) 0, rgba($skeleton-grey,1) 5px, rgba(255, 255, 255 ,1) 6px, rgba(255, 255, 255 ,1) 21px);
$componenttext-transparentimage: linear-gradient(180deg, rgba($skeleton-grey,1) 0, rgba($skeleton-grey,1) 5px, rgba(255, 255, 255 ,0) 6px, rgba(255, 255, 255 ,0) 21px);
$componenttext-position: 15px 36px;
$componenttext-size: 88% 21px;

// list componente
$componentlist-image: linear-gradient(180deg, rgba($skeleton-grey,1) 0, rgba($skeleton-grey,1) 5px, rgba(255, 255, 255 ,0) 6px, rgba(255, 255, 255 ,0) 41px);
$componentlist-position: 15px 56px;
$componentlist-size: 88% 41px;

// caja modulo
$modbox-image: linear-gradient(#ffffff 1000px, transparent 0);
$modbox-position: 0 0;
$modbox-size: 100% 264px;


.lazy-module {
  &:empty {
    display: block;
    opacity: 1;
    margin: auto;
    width: 100%;
    &:before {
      content:'';
      display: block;
      background-image: $brillo-image, $modbox-image;
      background-position: $brillo-position-start, $modbox-position;
      background-size: $brillo-size, $modbox-size;
      background-repeat: no-repeat;
      animation: shinelazyload 1s infinite;
      margin-bottom: 40px;
      height: 319px;
    }
  }
}

@keyframes shinelazyload {
  to {
    background-position: $brillo-position-end, $modbox-position;
  }
}

$skeleton-line-height: 6px;
/* New skeleton elements */
.lazy-module {
  .skeleton {
    position: relative;
    &__module {
      border: 1px solid $skeleton-grey;
      border-radius: $border-radius-large;
      background: #fff;
      overflow: hidden;
      min-height: 20px;
    }
    &__title, &__image, &__paragraph, &__list, &__button, &__price {
      position:relative;
      &:after {
        content:'';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        background-image: $brillo-image;
        background-position: $brillo-position-start;
        background-size: $brillo-size;
        background-repeat: no-repeat;
        animation: shineanimation 1s infinite;
      }
    }
    &__title, &__image, &__price, &__button {
      background: $skeleton-grey;
    }
    &__title {
      width: 100px;
      height: $skeleton-line-height;
      margin: 9px 0;
      &.h2 {
        margin-top: 26px;
        margin-bottom: 15.5px;
        height: 14px;
      }
      &.h3 {
        margin-top: 25px;
        margin-bottom: 14px;
        height: 14px;
      }
    }
    &__paragraph, &__list {
      width: 100%;
      height: 90px;
    }
    &__paragraph {
      background-repeat: no-repeat, repeat-y;
      background-image: $componenttitletext-image, $componenttext-image;
      background-position: $componenttitletext-position, $componenttext-position;
      background-size: $componenttitletext-size, $componenttext-size;
    }
    &__paragraph.skeleton__paragraph--transparent {
      background-repeat: no-repeat, repeat-y;
      background-image: $componenttitletext-transparentimage, $componenttext-transparentimage;
      background-position: $componenttitletext-position, $componenttext-position;
      background-size: $componenttitletext-size, $componenttext-size;
    }
    &__list {
      background-repeat: repeat-y;
      background-image: $componentlist-image;
      background-position: $componentlist-position;
      background-size: $componentlist-size;
    }
    &__price, &__button {
      width: 100px;
      height: 40px;
      display: inline-block;
    }
    .offers {
      .cont_tamanio_foto {
        .skeleton__image.img-responsive {
          height: 200px;
        }
      }
      .skeleton__title {
        margin: 5px 0;
      }
      ul .precio {
        height: 23px;
        .skeleton__price {
          height: 23px;
        }
      }
    }
    .collapse-list-title {
      .skeleton__title {
        margin-top: 26px;
        margin-bottom: 15.5px;
        height: 14px;
      }
    }
    .location-list-item {
      .skeleton__title {
        margin: 0;
      }
    }
    .cardSeo {
      .cardSeoContent {
        .cardSeo__title {
          .skeleton__title {
            margin: 6px 0;
          }
        }
      }
    }
  }
}
.destinia_seo_web_hotels_modules_hotelcarousel {
  .skeleton {
    .cardSeoContent {
      position: relative;
    }
    .skeleton__paragraph {
      height: 150px;
    }
    .skeleton__price {
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  }
}
.hotel-carousel-small .destinia_seo_web_hotels_modules_hotelcarousel {
  .skeleton {
    .responsive-elem {
      display: none;
      &:first-child {
        display: block;
        width: 100%;
      }
      .cardSeo {
        @media (min-width: $grid-float-breakpoint) {
          display: flex;
          height: 220px;
          .cardSeoHeader {
            min-height: 220px;
          }
          .cardSeo__img {
            width: 270px;
            height: 220px;
            border-top-right-radius: 0;
          }
          .cardSeoContent {
            flex: 1;
            border-bottom-left-radius: 0;
            border-top-right-radius: 6px;
            border-top: 1px solid $input-border;
            border-left: 0;
            height: 220px;
            min-height: 220px;
            max-height: 220px;
          }
        }
      }
    }
  }
}
.destinia_seo_web_hotels_modules_hotelsnearpoi {
  .skeleton {
    .skeleton__list {
      height: 252px;
      @media (min-width: $grid-float-breakpoint) {
        height: 138px;
      }
    }
  }
}
.destinia_seo_web_hotels_modules_fakeavailability, .destinia_av_web_hotels_modules_loader {
  .skeleton {
    .cont_btn_mix .skeleton__button {
      @media (min-width: $screen-lg-min) {
        width: 100%;
      }
    }
    .filters {
      @media (min-width: $screen-lg-min) {
        .skeleton__list {
          height: 380px;
        }
      }
    }
    .mobile_navigation_map_filter_order {
      height: 40px;
    }
    .hotel_card {
      height: 174px;
      display: flex;
      position: relative;

      .skeleton__image {
        flex: 0 0 41.666667%;
        @media (min-width: $grid-float-breakpoint) {
          flex: 0 0 33.33333%;
        }
      }

      .skeleton__paragraph {
        flex: 0 1 50%;
        height: 96px;
      }

      .skeleton__price, .skeleton__button {
        position: absolute;
        right: 50px;
        @media (max-width: $grid-float-breakpoint-max) {
          right: 10px;
        }

      }

      .skeleton__price {
        bottom: 70px;
        @media (max-width: $grid-float-breakpoint-max) {
          display: none;
        }
      }

      .skeleton__button {
        bottom: 15px
      }
    }
  }
}
.destinia_seo_web_hotels_modules_nearbylocations {
}
.destinia_seo_web_common_modules_weather {
  .skeleton {
    .weather_vertical {
      .skeleton__paragraph {
        height: 168px;
      }

      .skeleton__list {
        height: 168px;
      }
    }

    .weather_horizontal {
      .skeleton__paragraph {
        height: 96px;
      }

      .skeleton__list {
        display: none;
      }
    }
  }
}
.destinia_seo_web_hotels_modules_flightstolocation {
  .skeleton {
    .skeleton__module {
      position: relative;
    }

    .skeleton__paragraph {
      height: 50px;
    }

    .skeleton__price {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
  }
}

/* card viajes */
.scv_packages_multiservice_modules_packagelist_card {
  .skeleton {
    .package-img .img-element {
      height: 200px;
    }
    .package-details .skeleton__paragraph {
      height: 66px;
      @media (max-width: $grid-float-breakpoint-max) {
        height: 32px;
      }
    }
    .skeleton__price {
      height: 20px;
    }
    .skeleton__button {
       @media (max-width: $grid-float-breakpoint-max) {
         height: 32px;
       }
    }
  }
}

/* seleccion habitacion dispo hoteles */
.widgets_hotels_search_roomselection_hoteldescriptionwidget {
  .skeleton {
    .skeleton__paragraph {
      height: 180px;
    }
  }
}
.widgets_hotels_search_roomselection_amenitieswidget {
  .skeleton {
    .skeleton__list {
      height: 280px;
    }
  }
}

/* Coupons */
.my_account_modules_coupon {
  .skeleton__module {
    width: 100%;
    margin-bottom: 20px;
    @media (min-width: $screen-lg-min) {
      width: 455px;
    }
  }
  .skeleton__paragraph {
    width: 245px;
    height: 65px;
  }
  .skeleton__price {
    width: 137px;
    height: 25px;
    margin: 20px 15px 10px;
  }
}

@keyframes shineanimation {
  to {
    background-position: $brillo-position-end;
  }
}


/* Modulos common packages getaways */

.destinia_seo_web_home_modules_packagesgetaways, .destinia_seo_web_common_modules_packagesgetaways {
  .skeleton {
    a .skeleton__title {
      margin: 5px 0 ;
    }
    .skeleton__image.img-responsive {
      @media (max-width: $screen-sm-max) {
        height: 125px;
      }
    }
  }
}
/* Modulos homepage packages page offers */
.destinia_seo_web_common_modules_pageoffers {
  .skeleton {
    .skeleton__title {
      &.h2 {
        margin-top: 26px;
        margin-bottom: 15.5px;
        height: 14px;
      }
    }
  }
}

/* Modulo vuelos flightdealslisting */
.destinia_seo_web_flights_modules_flightdealslisting {
  .skeleton {
    .logo_aerolinea {
      min-height: 30px;
    }
    .destacados_img {
      min-width: 385px;
      position: absolute;
    }
    .info_carousel {
      height: 89px;
    }
    .list_offer {
      .skeleton__title, .skeleton__price, .skeleton__image {
        display: inline-block;
      }
      .skeleton__title {
        margin: 0;
        width: 75px;
      }
      .skeleton__image {
        width: 83px;
        height: 26px;
      }
      .skeleton__price {
        width: 60px;
        height: 17px;
      }
    }
  }
}

/* Modulo flightslatestsearchesoffers */
.destinia_seo_web_flights_modules_flightslatestsearchesoffers {
  .skeleton {
    .cont_tamanio_foto .skeleton__image {
      height: 204px;
    }
    ul a .skeleton__title {
      margin: 3px 0;
    }
    .precio .skeleton__price {
      height: 23px;
    }
  }
}

/* Modulo flightsmainroutes */
.destinia_seo_web_flights_modules_flightsmainroutes {
  .skeleton {
    .cont_tamanio_foto .skeleton__image {
      height: 204px;
    }
    .precio .skeleton__price {
      height: 23px;
    }
  }
}

/**/
.skeleton {
  .widgets_hotels_dealsbylocationsnocacheablewidget {
    .img_home_hotel {
      min-height: 246px;
    }
    .cont_img_deal {
      .skeleton__image {
        height: 0;
        padding-bottom: 66%;
      }
    }
    .title {
      .skeleton__title {
        margin: 0;
      }
    }
    .position_bottom {
      .skeleton__price {
        height: 21px;
      }
    }
  }
  .tab_menu {
    .skeleton__title {
      display: inline-block;
      width: 45px;
    }
  }
  .txt_costa {
    display: block;
    .skeleton__title {
      display: inline-block;
      margin: 0;
    }
  }
  .original {
    .skeleton__title {
      display: inline-block;
      margin: 0;
    }
  }
}
.destinia_seo_web_flightandhotel_modules_transportandhotelbestoffers {
  .skeleton {
    span.skeleton__title  {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    .estancia span.skeleton__title  {
      width: 250px;
    }
  }
}

.destinia_seo_web_travels_modules_featureddestinations {
  .skeleton {
    .skeleton__title.h3 {
      margin-top: 9px;
    }
    .destino_destacado {
      .skeleton__paragraph {
        margin-left: -15px;
      }
    }
    .cont_img_destino_destacado {
      .skeleton__image {
        height: 0;
        padding-bottom: 55.5%;
        @media (max-width: 991px) {
          display: none;
        }
      }
    }
    .modulo_mas_deseados {
      .bg_fondo {
        background: $skeleton-grey;
      }
      .skeleton__price {
        height: 15px;
      }
    }
  }
}
/* Modulo bioscore */
.skeleton {
  .hotel-bioscore-container {
    .bioscore-rating__score {
      .skeleton__image {
        width: 48px;
        height: 55px;
      }
    }

  }
}
/* ski */
.skeleton {
  .widgets_ski_skihillshotelsofferswidget {
    .img_home_hotel {
      min-height: 246px;
    }
    .cont_img_deal {
      .skeleton__image {
        height: 0;
        padding-bottom: 66%;
      }
    }
    .title {
      .skeleton__title {
        margin: 0;
      }
    }
    .position_bottom {
      .skeleton__price {
        height: 21px;
      }
    }
  }
}
/* coches */
.skeleton {
  .widgets_cars_carpromotionswidget {
    .img_home_cars {
      min-height: 246px;
    }
    .cont_img_deal {
      .skeleton__image {
        height: 0;
        padding-bottom: 66%;
      }
    }
    .title {
      .skeleton__title {
        margin: 0;
      }
    }
    .position_bottom {
      .skeleton__price {
        height: 21px;
      }
    }
  }
}
/* Destinia header main nav */
.destinia_seo_web_common_modules_mainheadermenu {
  .skeleton {
    .skeleton__title {
      display: inline-block;
      vertical-align: middle;
      margin: 0;
      width: 60px;
    }
  }
}

/* Destinia links footer */
.destinia_seo_web_common_modules_footermenu {
  .skeleton {
    .skeleton__title {
      display: inline-block;
      vertical-align: middle;
      margin: 0;
      width: 80px;
    }
  }
}