@function randomNum($min, $max) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));

  @return $randomNum;
}

$base-color: #ddd;
$shine-color: #e8e8e8;
$animation-duration: 1.6s;
@mixin background-gradient {
  background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px);
  background-size: 600px;
}

.rsssl-placeholder {
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  margin: 0;
  padding-bottom: 24px;
  color: #1e1e1e;
  -moz-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  border-radius: 2px;
  background-color: #fff;
  flex-grow: 100;

  .rsssl-placeholder-line {
    float: left;
    width: 100%;
    height: 16px;
    margin-top: 12px;
    border-radius: 7px;
    &:last-of-type{
      margin-bottom: 24px;
    }
    @include background-gradient;
    animation: shine-lines $animation-duration infinite linear;
    @for $i from 1 through 20 {
      &:nth-of-type( #{$i} ) {
        width: ( random(40) + 60 ) * 1%;
      }
    }
  }

  .rsssl-placeholder-line ~ .rsssl-placeholder-line {
    background-color: #ddd;
  }

}

@keyframes shine-lines {
  0% {
    background-position:- 400px;
  }
  100% {
    background-position: 220px;
  }
}