@import './components/variables';

.wadi_gallery_grid_container {
  .wadi_gallery_grid_filter {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    ul.wadi_gallery_grid_filters_list {
      list-style: none;
      display: flex;
      padding-left: 0;
      flex-wrap: wrap;
      li.wadi_gallery_grid_filter_item {
        margin: 5px;
      }
    }
  }

  // .wadi_grid_sizer {
  //     width: 33.333%;
  // }

  .wadi_gallery_grid {
    // width: 100%;
    //   display: grid;
    //   grid-template-columns: repeat(3, 1fr);
    //   gap: 10px;
    //   grid-auto-rows: minmax(100px, auto);

    .wadi_gallery_grid_item {
      position: relative;
      float: left;
      // width: 25%;
      height: auto;

      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
      // margin: 5px;
      // padding: 10px;
      // background: #888;
      // color: #262524;

      &:hover {
        .wadi_gallery_grid_lightbox_link {
          width: 100%;
          height: 100%;
          position: absolute;
          object-fit: contain;
          cursor: pointer;
          background: transparent;
          z-index: 300;
          // transition: 1.3s;
        }

        .wadi_gallery_grid_video {
          width: 100%;
          height: 100%;
          position: absolute;
          object-fit: contain;
          cursor: pointer;
          background: transparent;
          z-index: 300;
        }
      }

      .wadi_gallery_item_text_content {
        position: absolute;
        top: auto;
        right: 0;
        left: 0;
        width: 100%;
        bottom: 0;
        padding: inherit;
        text-align: center;
      }
      
      .wadi_icon_video_item {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        
        i.fa-play {
          font-size: 3rem;
          color: #fff;
          text-shadow: 1px 0 6px rgb(0 0 0 / 30%);
        }
        svg {
          width: 3rem;
          height: 3rem;
        }
      }

      &.wadi_gallery_grid_item_video_inline {

        .hide_grid_item_thumb {
          display: none;
        }
        // min-height: 350px;
        
        .wadi_gallery_grid_video_iframe {
          background: #000;
          height: 100%;
          // position: absolute;
          width: 100%;
          visibility: visible;
          top: 0;
          left: 0;
          max-width: 100%;
          width: 100%;
          height: 100%;
          margin: 0;
          line-height: 1;
          border: none;
        }
        .wadi_gallery_grid_self_hosted_video {
          background: #000;
          height: 100%;
          // position: absolute;
          width: 100%;
          visibility: visible;
          top: 0;
          left: 0;
          max-width: 100%;
          width: 100%;
          height: 100%;
          margin: 0;
          line-height: 1;
          border: none;
        }
      }
    }
  }

  a.data_filter {
    text-decoration: none;
    padding: 12px;
    font-size: 1.4rem;
    background-color: $wadi_primary_color;
    color: #fff;
    &.filter_active {
      background-color: $wadi_secondary_color;
      color: #000;
    }
  }
}

// Gallery Grid Skins

// Style 1
.wadi_gallery_grid_skin_style_1 {
  
  .wadi_gallery_grid_container {

    .wadi_gallery_grid {

      .wadi_gallery_grid_item {
      
            &:hover > .wadi_icon_video_item {
                transition: transform 0.8s, opacity 0.8s;
                transform: translate(-50%, -50%);
                opacity: 1;
            }
          
            .wadi_icon_video_item {
              transition: transform 0.8s, opacity 0.8s;
              transform: translate(0, 120px);
              opacity: 0;
            }
      
            &:hover > .wadi_gallery_item_text_content {
              transition: transform 0.5s, opacity 0.5s;
              transform: translateY(0);
              opacity: 1;
            }
      
            .wadi_gallery_item_text_content {
              transition: transform 0.5s, opacity 0.5s;
              transform: translateY(80px);
              opacity: 0;
        
        
              // p.wadi_gallery_item_text_title {
              //   background: #ededede0;
              //   padding: 20px;
              //   border: 2px solid #b4b4b4;
              // }
          }
        }
    }
  }
}

// Style 2
.wadi_gallery_grid_skin_style_2 {
  
  .wadi_gallery_grid_container {

    .wadi_gallery_grid {

      .wadi_gallery_grid_item {
        overflow: hidden;
        .wadi_gallery_grid_image {
          transform: scale(1);
          filter: grayscale(0);
          transition: transform 0.5s, filter 0.8s;
          perspective: 900px;
        }

        &:hover > .wadi_gallery_grid_image {
            transform: scale(1.2);
            filter: grayscale(100%);
            transition: transform 0.5s, filter 0.8s;
        }
        .wadi_icon_video_item {
          z-index: 10;
        }
      }
    }
  }
}

// Style 3
.wadi_gallery_grid_skin_style_3 {
  
  .wadi_gallery_grid_container {

    .wadi_gallery_grid {

      .wadi_gallery_grid_item {
        transform: rotate3d(0,0,0,0);
        transition: transform 1s;

        &:hover { 
          transform: rotate3d(20, 20, 50, 3deg);
          transition: transform 1s;
        }

        }
    }
  }
}

// Style 4
.wadi_gallery_grid_skin_style_4 {
  
  .wadi_gallery_grid_container {

    .wadi_gallery_grid {

      .wadi_gallery_grid_item {
          transition: .5s all ease;
          transform: scale(0.97);
          perspective: 900px;
          // animation: entry 1s linear 1;
          img, video, iframe {
            box-shadow: 0px 20px 50px #555;
          }

        &:hover { 
          cursor: pointer;
          transform: rotate(0deg) scale(1) translateY(10px);
          transition: .5s all ease;
          z-index: 400;
        }

        }
    }
  }
}