@mixin loading-animation {
  background: white;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;

  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

  -webkit-animation-name: placeHolderShimmer;
  -moz-animation-name: placeHolderShimmer;
  -o-animation-name: placeHolderShimmer;
  animation-name: placeHolderShimmer;

  @keyframes placeHolderShimmer {
    0% { background-position: -468px 0 }
    100% { background-position:  468px 0 }
  }
}

jb-list-placeholder {
  ul.table-list li.list-header { min-height: 52px; }

  .fake-row-placeholder {
    list-style: none;
    .placeholder-text {
      @include loading-animation;
      height: 20px;
      position: relative;

    }
    &.fake-button-template .placeholder-text {
      margin: 0;
      height: 35px;
      margin-left: 70%;
    }
    &.line-1 { .placeholder-text { width: 10%; } }
    &.line-2 { .placeholder-text { width: 20%; } }
    &.line-3 { .placeholder-text { width: 30%; } }
    &.line-4 { .placeholder-text { width: 40%; } }
    &.line-5 { .placeholder-text { width: 50%; } }
    &.line-6 { .placeholder-text { width: 60%; } }
    &.line-7 { .placeholder-text { width: 70%; } }
    &.line-8 { .placeholder-text { width: 80%; } }
    &.line-9 { .placeholder-text { width: 90%; } }
  }

  .fake-tile-placeholder {
    width: 100%;
    height: 500px;
    @include loading-animation;
  }



  $col-w4: calc(25% - 11.25px);
  $col-w3: calc(33.33% - 10px);
  $col-w2: calc(50% - 7.5px);

  .fake-cards-list {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 100%;
    @media (min-width: 768px)  { grid-template-columns: $col-w2 $col-w2; }                 // 2 cards per row (sm)
    @media (min-width: 1200px) { grid-template-columns: $col-w3 $col-w3 $col-w3; }         // 3 cards per row (lg)
    @media (min-width: 1650px) { grid-template-columns: $col-w4 $col-w4 $col-w4 $col-w4; } // 4 cards per row (xl)

    .card-wrapper {
      min-height: 250px;
      width: 100%;
      height: 100%;
      box-shadow: 0 1px 2px rgba(34, 36, 38, 0.15);
      border-radius: 3px;
      padding: 25px;
      background: white;
      .card-placeholder {
        position: relative;
        width: 100%;
        height: 100%;
        @include loading-animation;
        div {
          position: absolute;
          background: white;
          &.upper-image   { top: 0;       left: 100px; width: 25px;  height: 100px; }
          &.upper-button  { top: 0;       right: 50px; width: 15px;  height: 50px; }
          &.upper-line1   { top: 20px;    left: 125px; right: 65px;  height: 10px; }
          &.upper-line2   { top: 30px;    width: 55px; right: 50px;  height: 20px; }
          &.upper-line3   { top: 50px;    left: 125px; right: 0;     height: 15px; }
          &.upper-line4   { top: 80px;    left: 125px; right: 0;     height: 6px; }
          &.upper-line5   { top: 81px;    right: 0;    width: 40px;  height: 30px; }
          &.mid           { top: 100px;   left: 0;     right: 0;     bottom: 75px; }
          &.bottom-line1  { bottom: 50px; left: 0;     right: 0;     height: 10px; }
          &.bottom-line2  { bottom: 0;    left: 150px; right: 115px; height: 50px; }
          &.bottom-line3  { bottom: 0;    right: 50px; width: 10px;  height: 50px; }
        }
      }
    }
  }

  &.three-columns .fake-cards-list {
    @media (min-width: 768px)  { grid-template-columns: $col-w2 $col-w2; }         // 2 cards per row (sm)
    @media (min-width: 1200px) { grid-template-columns: $col-w3 $col-w3 $col-w3; } // 3 cards per row (lg)
  }
  &.two-columns .fake-cards-list {
    @media (min-width: 1200px) { grid-template-columns: $col-w2 $col-w2; } // 2 cards per row(lg)
  }


}

// .overlay-text {
//   text-align: center;
//   position: absolute;
//   left: calc(50% - 60px);
//   top: calc(50% - 20px);
//   color: gray;
//   z-index: 9999;
//   h4 {
//     &::after {
//       animation: three-dot-ani 1s;
//       animation-iteration-count: infinite;
//       content: "";
//       @keyframes three-dot-ani {
//         0%    { content: ""; }
//         25%   { content: "."; }
//         50%   { content: ".."; }
//         75%   { content: "..."; }
//         100%  { content: ""; }
//       }
//     }
//   }
// }