@import './variables.scss';

@mixin generateTextPlaceholder($container-width, $rows-n, $column-n) {
  @for $row from 1 through $rows-n {
    $el-position: 0;
    $max-width: 0;
    @for $i from 1 through $column-n {
      $el-width: random(100) + 20;
      $max-width: $el-width + $el-position + 10 * ($i - 1);
      :nth-child(#{$i+($row - 1) * $column-n}) {
        @if ($max-width + 20 < $container-width) {
          background: $lite-gray;
          border-radius: 5px;
          height: 10px;
          position: absolute;
          width: $el-width + px;
          left: $el-position + 10 * ($i - 1) + px;
          top: ($row - 1) * 20 + px;
        } @else {
          $last-el-width: $container-width - ($max-width - $el-width);
          @if ($last-el-width > 10) {
            background: $lite-gray;
            border-radius: 5px;
            height: 10px;
            position: absolute;
            width: $last-el-width + px;
            left: $el-position + 10 * ($i - 1) + px;
            top: ($row - 1) * 20 + px;
          }
        }
      }
      $el-position: $el-position + $el-width;
    }
  }
}
