<div class="lemming--blocker"></div>

/* 
   Lemming Blocker
   Joan Leon
   @nucliweb
*/

$hair: #00b0b0;
$skin: #f0d0d0;
$clothes: #4040e0;
$grid: 10;

$colors: (
  1: $hair,
  2: $skin,
  3: $clothes
);

// Lemming Blocker -----------------------
$lemming-blocker: 0,0,0,0,1,1,0,0,0,0,
                  0,0,0,1,1,1,1,0,0,0,
                  0,0,0,1,2,2,1,0,0,0,
                  2,0,0,0,2,2,0,0,0,2,
                  2,2,2,2,3,3,2,2,2,2,
                  0,0,0,0,3,3,0,0,0,0,
                  0,0,0,0,3,3,0,0,0,0,
                  0,0,0,3,3,3,3,0,0,0,
                  0,0,0,3,0,0,3,0,0,0,
                  0,0,2,2,0,0,2,2,0,0;

@function pixelart($lemming-list, $shadow-count: $grid) {
  $shadows: ();
  $row: 0;
  $col: 1;
  
  @for $i from 1 through length($lemming-list) {
    @if( nth($lemming-list,$i) > 0 ) {
      $shadows: append($shadows, ($col * 1px) ($row * 1px) 0 map-get($colors,nth($lemming-list,$i)), 'comma');
    }
    
    @if($i % $grid == 0) {
      $row: $row+1;
      $col: 0;
    }
    
    $col: $col + 1;
  }
  
  @return $shadows;
}

body {
  background-color: #151515;
  overflow: hidden;
}

.lemming--blocker {
  width: 1px;
  height: 1px;
  margin: 100px;
  transform: scale(10);
  
  box-shadow: pixelart($lemming-blocker);
}