@mixin pixelize($size, $matrix, $colors, $default-color: null) {
  $ret: "";
  $moz: "";
  @if ($default-color == null) {
    // count number of each color in matrix and decide main color by highest count
    $matrix-colors: ();
    $counts: ();
    @each $row in $matrix {
      @each $item in $row {
        @if $item != 0 {
          $index: index($matrix-colors, $item);
          @if not $index {
            $matrix-colors: append($matrix-colors, $item);
            $counts: append($counts, 1);
          } @else {
            $count: nth($counts, $index) + 1;
            $counts: set-nth($counts, $index, $count);
          }
        }
      }
    }
    // use index of the highest count to get the corresponding matrix color
    $default-color: nth($colors, nth($matrix-colors, index($counts, max($counts...))));
  }

  @for $i from 1 through length($matrix) {
    $row: nth($matrix, $i);

    @for $j from 1 through length($row) {
      $dot: nth($row, $j);

      @if $dot != 0 {
        @if $ret != "" {
          $ret: $ret + ",";
          $moz: $moz + ",";
        }

        $color: nth($colors, $dot);
        @if $color == $default-color {
          $ret: $ret + ($j * $size) + " " + ($i * $size);
          $moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em";
        } @else {
          $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
          $moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em " + $color;
        }
      }
    }
  }

  width: $size;
  height: $size;
  color: $default-color;
  box-shadow: unquote($ret);

  // firefox only style
  @supports (-moz-appearance: meterbar) {
    box-shadow: unquote($moz);
  }
}