
@keyframes animatedPlaceHolderShimmer {
  0% {
    background-position: -200px 0
  }
  100% {
    background-position: 100% 0
  }
}

.animated {
  margin-right: 5px;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: animatedPlaceHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  height: 72px;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  position: relative;
}


/* ----- General styling for route information listings ----- */
animated-placeholder {
  display: block;

  .background-masker {
    background: #fff;
    position: absolute;
  }

  $masker-line-height: 8px;
  $masker-icon-lines: 3;
  $masker-icon-height-width: $masker-line-height * $masker-icon-lines;

  .background-masker.header-top {
    top: $masker-line-height;
    left: $masker-icon-height-width;
    right: 0;
    height: $masker-line-height * ($masker-icon-lines - 1);
  }

  .background-masker.subheader-bottom-left,
   .background-masker.subheader-bottom-right {
    top: 0px;
    height: $masker-line-height;
  }

  .background-masker.subheader-bottom-left {
    left: $masker-icon-height-width;
    width: $masker-line-height;
  }

  .background-masker.subheader-bottom-right {
    width: 100px;
    right: 0;
  }

  .background-masker.content-top,
  .background-masker.content-first-line,
  .background-masker.content-second-line {
    left: 0;
    right: 0;
  }

  .background-masker.content-top {
    top: $masker-icon-height-width;
    height: $masker-line-height;
  }
  .background-masker.content-first-line  {
    top: $masker-icon-height-width + $masker-line-height * 2;
    height: $masker-line-height;
  }

  .background-masker.content-second-line {
    top: $masker-icon-height-width + $masker-line-height * 4;
    height: $masker-line-height;
  }

  .background-masker.content-second-end{
    width: 100px;
    right: 0;
    top: $masker-icon-height-width + $masker-line-height * 5;
    height: $masker-line-height;
  }
}
