<input type="checkbox" id="in-1-1"/>
<input type="checkbox" id="in-1-2" checked />
<input type="checkbox" id="in-1-3"/>
<input type="checkbox" id="in-1-4"/>
<input type="checkbox" id="in-1-5" checked />
<input type="checkbox" id="in-1-6"/>
<input type="checkbox" id="in-1-7"/>
<input type="checkbox" id="in-1-8"/><br/>
<input type="checkbox" id="in-2-1"/>
<input type="checkbox" id="in-2-2" checked />
<input type="checkbox" id="in-2-3" checked />
<input type="checkbox" id="in-2-4"/>
<input type="checkbox" id="in-2-5"/>
<input type="checkbox" id="in-2-6" checked />
<input type="checkbox" id="in-2-7"/>
<input type="checkbox" id="in-2-8" checked /><br/>
<input type="checkbox" id="in-3-1"/>
<input type="checkbox" id="in-3-2" checked />
<input type="checkbox" id="in-3-3" checked />
<input type="checkbox" id="in-3-4"/>
<input type="checkbox" id="in-3-5" checked />
<input type="checkbox" id="in-3-6" checked />
<input type="checkbox" id="in-3-7"/>
<input type="checkbox" id="in-3-8"/><br/>
<input type="checkbox" id="in-4-1"/>
<input type="checkbox" id="in-4-2" checked />
<input type="checkbox" id="in-4-3" checked />
<input type="checkbox" id="in-4-4"/>
<input type="checkbox" id="in-4-5" checked />
<input type="checkbox" id="in-4-6" checked />
<input type="checkbox" id="in-4-7"/>
<input type="checkbox" id="in-4-8"/><br/>
<input type="checkbox" id="in-5-1"/>
<input type="checkbox" id="in-5-2" checked />
<input type="checkbox" id="in-5-3" checked />
<input type="checkbox" id="in-5-4"/>
<input type="checkbox" id="in-5-5" checked />
<input type="checkbox" id="in-5-6" checked />
<input type="checkbox" id="in-5-7" checked />
<input type="checkbox" id="in-5-8" checked /><br/>
<input type="checkbox" id="in-6-1"/>
<input type="checkbox" id="in-6-2"/>
<input type="checkbox" id="in-6-3" checked />
<input type="checkbox" id="in-6-4"/>
<input type="checkbox" id="in-6-5"/>
<input type="checkbox" id="in-6-6"/>
<input type="checkbox" id="in-6-7"/>
<input type="checkbox" id="in-6-8"/><br/>
<input type="checkbox" id="in-7-1"/>
<input type="checkbox" id="in-7-2" checked />
<input type="checkbox" id="in-7-3"/>
<input type="checkbox" id="in-7-4" checked />
<input type="checkbox" id="in-7-5"/>
<input type="checkbox" id="in-7-6" checked />
<input type="checkbox" id="in-7-7" checked />
<input type="checkbox" id="in-7-8" checked /><br/>
<input type="checkbox" id="in-8-1"/>
<input type="checkbox" id="in-8-2" checked />
<input type="checkbox" id="in-8-3" checked />
<input type="checkbox" id="in-8-4"/>
<input type="checkbox" id="in-8-5" checked />
<input type="checkbox" id="in-8-6" checked />
<input type="checkbox" id="in-8-7" checked />
<input type="checkbox" id="in-8-8" checked /><br/>
<input type="checkbox" id="in-9-1"/>
<input type="checkbox" id="in-9-2" checked />
<input type="checkbox" id="in-9-3" checked />
<input type="checkbox" id="in-9-4" checked />
<input type="checkbox" id="in-9-5"/>
<input type="checkbox" id="in-9-6"/>
<input type="checkbox" id="in-9-7" checked />
<input type="checkbox" id="in-9-8"/><br/>
<input type="checkbox" id="in-10-1"/>
<input type="checkbox" id="in-10-2" checked />
<input type="checkbox" id="in-10-3" checked />
<input type="checkbox" id="in-10-4"/>
<input type="checkbox" id="in-10-5" checked />
<input type="checkbox" id="in-10-6" checked />
<input type="checkbox" id="in-10-7"/>
<input type="checkbox" id="in-10-8"/><br/>
<input type="checkbox" id="in-11-1"/>
<input type="checkbox" id="in-11-2" checked />
<input type="checkbox" id="in-11-3" checked />
<input type="checkbox" id="in-11-4"/>
<input type="checkbox" id="in-11-5"/>
<input type="checkbox" id="in-11-6" checked />
<input type="checkbox" id="in-11-7"/>
<input type="checkbox" id="in-11-8"/><br/>
<input type="checkbox" id="in-12-1"/>
<input type="checkbox" id="in-12-2"/>
<input type="checkbox" id="in-12-3" checked />
<input type="checkbox" id="in-12-4"/>
<input type="checkbox" id="in-12-5"/>
<input type="checkbox" id="in-12-6"/>
<input type="checkbox" id="in-12-7"/>
<input type="checkbox" id="in-12-8" checked /><br/>
<section>
  <h1><span class="output-1"></span><span class="output-2"></span><span class="output-3"></span><span class="output-4"></span><span class="output-5"></span><span class="output-6"></span><span class="output-7"></span><span class="output-8"></span><span class="output-9"></span><span class="output-10"></span><span class="output-11"></span><span class="output-12"></span>
  </h1>
</section>
<nav>
  <div>
    <label for="in-1-1"></label>
    <label for="in-1-2"></label>
    <label for="in-1-3"></label>
    <label for="in-1-4"></label>
    <label for="in-1-5"></label>
    <label for="in-1-6"></label>
    <label for="in-1-7"></label>
    <label for="in-1-8"></label>
  </div>
  <div>
    <label for="in-2-1"></label>
    <label for="in-2-2"></label>
    <label for="in-2-3"></label>
    <label for="in-2-4"></label>
    <label for="in-2-5"></label>
    <label for="in-2-6"></label>
    <label for="in-2-7"></label>
    <label for="in-2-8"></label>
  </div>
  <div>
    <label for="in-3-1"></label>
    <label for="in-3-2"></label>
    <label for="in-3-3"></label>
    <label for="in-3-4"></label>
    <label for="in-3-5"></label>
    <label for="in-3-6"></label>
    <label for="in-3-7"></label>
    <label for="in-3-8"></label>
  </div>
  <div>
    <label for="in-4-1"></label>
    <label for="in-4-2"></label>
    <label for="in-4-3"></label>
    <label for="in-4-4"></label>
    <label for="in-4-5"></label>
    <label for="in-4-6"></label>
    <label for="in-4-7"></label>
    <label for="in-4-8"></label>
  </div>
  <div>
    <label for="in-5-1"></label>
    <label for="in-5-2"></label>
    <label for="in-5-3"></label>
    <label for="in-5-4"></label>
    <label for="in-5-5"></label>
    <label for="in-5-6"></label>
    <label for="in-5-7"></label>
    <label for="in-5-8"></label>
  </div>
  <div>
    <label for="in-6-1"></label>
    <label for="in-6-2"></label>
    <label for="in-6-3"></label>
    <label for="in-6-4"></label>
    <label for="in-6-5"></label>
    <label for="in-6-6"></label>
    <label for="in-6-7"></label>
    <label for="in-6-8"></label>
  </div>
  <div>
    <label for="in-7-1"></label>
    <label for="in-7-2"></label>
    <label for="in-7-3"></label>
    <label for="in-7-4"></label>
    <label for="in-7-5"></label>
    <label for="in-7-6"></label>
    <label for="in-7-7"></label>
    <label for="in-7-8"></label>
  </div>
  <div>
    <label for="in-8-1"></label>
    <label for="in-8-2"></label>
    <label for="in-8-3"></label>
    <label for="in-8-4"></label>
    <label for="in-8-5"></label>
    <label for="in-8-6"></label>
    <label for="in-8-7"></label>
    <label for="in-8-8"></label>
  </div>
  <div>
    <label for="in-9-1"></label>
    <label for="in-9-2"></label>
    <label for="in-9-3"></label>
    <label for="in-9-4"></label>
    <label for="in-9-5"></label>
    <label for="in-9-6"></label>
    <label for="in-9-7"></label>
    <label for="in-9-8"></label>
  </div>
  <div>
    <label for="in-10-1"></label>
    <label for="in-10-2"></label>
    <label for="in-10-3"></label>
    <label for="in-10-4"></label>
    <label for="in-10-5"></label>
    <label for="in-10-6"></label>
    <label for="in-10-7"></label>
    <label for="in-10-8"></label>
  </div>
  <div>
    <label for="in-11-1"></label>
    <label for="in-11-2"></label>
    <label for="in-11-3"></label>
    <label for="in-11-4"></label>
    <label for="in-11-5"></label>
    <label for="in-11-6"></label>
    <label for="in-11-7"></label>
    <label for="in-11-8"></label>
  </div>
  <div>
    <label for="in-12-1"></label>
    <label for="in-12-2"></label>
    <label for="in-12-3"></label>
    <label for="in-12-4"></label>
    <label for="in-12-5"></label>
    <label for="in-12-6"></label>
    <label for="in-12-7"></label>
    <label for="in-12-8"></label>
  </div>
</nav>
<div class="map">
  <div><span>a</span><span>01100001</span></div>
  <div><span>b</span><span>01100010</span></div>
  <div><span>c</span><span>01100011</span></div>
  <div><span>d</span><span>01100100</span></div>
  <div><span>e</span><span>01100101</span></div>
  <div><span>f</span><span>01100110</span></div>
  <div><span>g</span><span>01100111</span></div>
  <div><span>h</span><span>01101000</span></div>
  <div><span>i</span><span>01101001</span></div>
  <div><span>j</span><span>01101010</span></div>
  <div><span>k</span><span>01101011</span></div>
  <div><span>l</span><span>01101100</span></div>
  <div><span>m</span><span>01101101</span></div>
  <div><span>n</span><span>01101110</span></div>
  <div><span>o</span><span>01101111</span></div>
  <div><span>p</span><span>01110000</span></div>
  <div><span>q</span><span>01110001</span></div>
  <div><span>r</span><span>01110010</span></div>
  <div><span>s</span><span>01110011</span></div>
  <div><span>t</span><span>01110100</span></div>
  <div><span>u</span><span>01110101</span></div>
  <div><span>v</span><span>01110110</span></div>
  <div><span>w</span><span>01110111</span></div>
  <div><span>x</span><span>01111000</span></div>
  <div><span>y</span><span>01111001</span></div>
  <div><span>z</span><span>01111010</span></div>
  <div><span>A</span><span>01000001</span></div>
  <div><span>B</span><span>01000010</span></div>
  <div><span>C</span><span>01000011</span></div>
  <div><span>D</span><span>01000100</span></div>
  <div><span>E</span><span>01000101</span></div>
  <div><span>F</span><span>01000110</span></div>
  <div><span>G</span><span>01000111</span></div>
  <div><span>H</span><span>01001000</span></div>
  <div><span>I</span><span>01001001</span></div>
  <div><span>J</span><span>01001010</span></div>
  <div><span>K</span><span>01001011</span></div>
  <div><span>L</span><span>01001100</span></div>
  <div><span>M</span><span>01001101</span></div>
  <div><span>N</span><span>01001110</span></div>
  <div><span>O</span><span>01001111</span></div>
  <div><span>P</span><span>01010000</span></div>
  <div><span>Q</span><span>01010001</span></div>
  <div><span>R</span><span>01010010</span></div>
  <div><span>S</span><span>01010011</span></div>
  <div><span>T</span><span>01010100</span></div>
  <div><span>U</span><span>01010101</span></div>
  <div><span>V</span><span>01010110</span></div>
  <div><span>W</span><span>01010111</span></div>
  <div><span>X</span><span>01011000</span></div>
  <div><span>Y</span><span>01011001</span></div>
  <div><span>Z</span><span>01011010</span></div>
  <div><span>0</span><span>00110000</span></div>
  <div><span>1</span><span>00110001</span></div>
  <div><span>2</span><span>00110010</span></div>
  <div><span>3</span><span>00110011</span></div>
  <div><span>4</span><span>00110100</span></div>
  <div><span>5</span><span>00110101</span></div>
  <div><span>6</span><span>00110110</span></div>
  <div><span>7</span><span>00110111</span></div>
  <div><span>8</span><span>00111000</span></div>
  <div><span>9</span><span>00111001</span></div>
  <div><span> </span><span>00100000</span></div>
  <div><span>!</span><span>00100001</span></div>
  <div><span>&quot;</span><span>00100010</span></div>
  <div><span>#</span><span>00100011</span></div>
  <div><span>$</span><span>00100100</span></div>
  <div><span>%</span><span>00100101</span></div>
  <div><span>&amp;</span><span>00100110</span></div>
  <div><span>'</span><span>00100111</span></div>
  <div><span>(</span><span>00101000</span></div>
  <div><span>)</span><span>00101001</span></div>
  <div><span>*</span><span>00101010</span></div>
  <div><span>+</span><span>00101011</span></div>
  <div><span>,</span><span>00101100</span></div>
  <div><span>-</span><span>00101101</span></div>
  <div><span>.</span><span>00101110</span></div>
  <div><span>/</span><span>00101111</span></div>
  <div><span>:</span><span>00111010</span></div>
  <div><span>;</span><span>00111011</span></div>
  <div><span>&lt;</span><span>00111100</span></div>
  <div><span>=</span><span>00111101</span></div>
  <div><span>&gt;</span><span>00111110</span></div>
  <div><span>?</span><span>00111111</span></div>
  <div><span>@</span><span>01000000</span></div>
  <div><span>[</span><span>01011011</span></div>
  <div><span>\</span><span>01011100</span></div>
  <div><span>]</span><span>01011101</span></div>
  <div><span>^</span><span>01011110</span></div>
  <div><span>_</span><span>01011111</span></div>
  <div><span>`</span><span>01100000</span></div>
  <div><span>{</span><span>01111011</span></div>
  <div><span>|</span><span>01111100</span></div>
  <div><span>}</span><span>01111101</span></div>
  <div><span>~</span><span>01111110</span></div>
</div>
// how many binary groups
$seq-count: 12;
// binary sequence and corresponding letter
$map:
  (seq: (0,0,1,0,0,0,0,1), char: "!"),
  (seq: (0,0,1,0,0,0,1,0), char: "\""),
  (seq: (0,0,1,0,0,0,1,1), char: "#"),
  (seq: (0,0,1,0,0,1,0,0), char: "$"),
  (seq: (0,0,1,0,0,1,0,1), char: "%"),
  (seq: (0,0,1,0,0,1,1,0), char: "&"),
  (seq: (0,0,1,0,0,1,1,1), char: "'"),
  (seq: (0,0,1,0,1,0,0,0), char: "("),
  (seq: (0,0,1,0,1,0,0,1), char: ")"),
  (seq: (0,0,1,0,1,0,1,0), char: "*"),
  (seq: (0,0,1,0,1,0,1,1), char: "+"),
  (seq: (0,0,1,0,1,1,0,0), char: ","),
  (seq: (0,0,1,0,1,1,0,1), char: "-"),
  (seq: (0,0,1,0,1,1,1,0), char: "."),
  (seq: (0,0,1,0,1,1,1,1), char: "/"),
  (seq: (0,0,1,1,0,0,0,0), char: "0"),
  (seq: (0,0,1,1,0,0,0,1), char: "1"),
  (seq: (0,0,1,1,0,0,1,0), char: "2"),
  (seq: (0,0,1,1,0,0,1,1), char: "3"),
  (seq: (0,0,1,1,0,1,0,0), char: "4"),
  (seq: (0,0,1,1,0,1,0,1), char: "5"),
  (seq: (0,0,1,1,0,1,1,0), char: "6"),
  (seq: (0,0,1,1,0,1,1,1), char: "7"),
  (seq: (0,0,1,1,1,0,0,0), char: "8"),
  (seq: (0,0,1,1,1,0,0,1), char: "9"),
  (seq: (0,0,1,1,1,0,1,0), char: ":"),
  (seq: (0,0,1,1,1,0,1,1), char: ";"),
  (seq: (0,0,1,1,1,1,0,0), char: "<"),
  (seq: (0,0,1,1,1,1,0,1), char: "="),
  (seq: (0,0,1,1,1,1,1,0), char: ">"),
  (seq: (0,0,1,1,1,1,1,1), char: "?"),
  (seq: (0,1,0,0,0,0,0,0), char: "@"),
  (seq: (0,1,0,1,1,0,1,1), char: "["),
  (seq: (0,1,0,1,1,1,0,0), char: "\\"),
  (seq: (0,1,0,1,1,1,0,1), char: "]"),
  (seq: (0,1,0,1,1,1,1,0), char: "^"),
  (seq: (0,1,0,1,1,1,1,1), char: "_"),
  (seq: (0,1,1,0,0,0,0,0), char: "`"),
  (seq: (0,1,1,1,1,0,1,1), char: "{"),
  (seq: (0,1,1,1,1,1,0,0), char: "|"),
  (seq: (0,1,1,1,1,1,0,1), char: "}"),
  (seq: (0,1,1,1,1,1,1,0), char: "~"),
  (seq: (0,0,1,0,0,0,0,0), char: "\00a0"),
  (seq: (0,1,1,0,0,0,0,1), char: "a"),
  (seq: (0,1,1,0,0,0,1,0), char: "b"),
  (seq: (0,1,1,0,0,0,1,1), char: "c"),
  (seq: (0,1,1,0,0,1,0,0), char: "d"),
  (seq: (0,1,1,0,0,1,0,1), char: "e"),
  (seq: (0,1,1,0,0,1,1,0), char: "f"),
  (seq: (0,1,1,0,0,1,1,1), char: "g"),
  (seq: (0,1,1,0,1,0,0,0), char: "h"),
  (seq: (0,1,1,0,1,0,0,1), char: "i"),
  (seq: (0,1,1,0,1,0,1,0), char: "j"),
  (seq: (0,1,1,0,1,0,1,1), char: "k"),
  (seq: (0,1,1,0,1,1,0,0), char: "l"),
  (seq: (0,1,1,0,1,1,0,1), char: "m"),
  (seq: (0,1,1,0,1,1,1,0), char: "n"),
  (seq: (0,1,1,0,1,1,1,1), char: "o"),
  (seq: (0,1,1,1,0,0,0,0), char: "p"),
  (seq: (0,1,1,1,0,0,0,1), char: "q"),
  (seq: (0,1,1,1,0,0,1,0), char: "r"),
  (seq: (0,1,1,1,0,0,1,1), char: "s"),
  (seq: (0,1,1,1,0,1,0,0), char: "t"),
  (seq: (0,1,1,1,0,1,0,1), char: "u"),
  (seq: (0,1,1,1,0,1,1,0), char: "v"),
  (seq: (0,1,1,1,0,1,1,1), char: "w"),
  (seq: (0,1,1,1,1,0,0,0), char: "x"),
  (seq: (0,1,1,1,1,0,0,1), char: "y"),
  (seq: (0,1,1,1,1,0,1,0), char: "z"),
  (seq: (0,1,0,0,0,0,0,1), char: "A"),
  (seq: (0,1,0,0,0,0,1,0), char: "B"),
  (seq: (0,1,0,0,0,0,1,1), char: "C"),
  (seq: (0,1,0,0,0,1,0,0), char: "D"),
  (seq: (0,1,0,0,0,1,0,1), char: "E"),
  (seq: (0,1,0,0,0,1,1,0), char: "F"),
  (seq: (0,1,0,0,0,1,1,1), char: "G"),
  (seq: (0,1,0,0,1,0,0,0), char: "H"),
  (seq: (0,1,0,0,1,0,0,1), char: "I"),
  (seq: (0,1,0,0,1,0,1,0), char: "J"),
  (seq: (0,1,0,0,1,0,1,1), char: "K"),
  (seq: (0,1,0,0,1,1,0,0), char: "L"),
  (seq: (0,1,0,0,1,1,0,1), char: "M"),
  (seq: (0,1,0,0,1,1,1,0), char: "N"),
  (seq: (0,1,0,0,1,1,1,1), char: "O"),
  (seq: (0,1,0,1,0,0,0,0), char: "P"),
  (seq: (0,1,0,1,0,0,0,1), char: "Q"),
  (seq: (0,1,0,1,0,0,1,0), char: "R"),
  (seq: (0,1,0,1,0,0,1,1), char: "S"),
  (seq: (0,1,0,1,0,1,0,0), char: "T"),
  (seq: (0,1,0,1,0,1,0,1), char: "U"),
  (seq: (0,1,0,1,0,1,1,0), char: "V"),
  (seq: (0,1,0,1,0,1,1,1), char: "W"),
  (seq: (0,1,0,1,1,0,0,0), char: "X"),
  (seq: (0,1,0,1,1,0,0,1), char: "Y"),
  (seq: (0,1,0,1,1,0,1,0), char: "Z");
// binary sequence length
$seq-length: 8;

// create a selector
@function selector($s, $i, $v) {
  @if $v == 0 {
    @return "#in-#{$s}-#{$i}:not(:checked)";
  } @else {
    @return "#in-#{$s}-#{$i}:checked";
  }
}

// for each letter
@each $item in $map {
  // binary sequence for the letter
  $seq: map-get($item, seq);
  // generate the main text selector  
  $sel-text: "";
  // generate the nav text selector  
  $sel-nav: "";
  // for each group
  @for $g from 1 through $seq-count {
    // for each binary value
    @for $i from 1 through $seq-length {
      // get the value      
      $val: nth($seq, $i);
      // get the selector
      $sel: selector($g, $i, $val);
      $sel-text: $sel-text + $sel;
      $sel-nav: $sel-nav + $sel;
      // if last, sibling combinator
      @if $i != $seq-length {
        $sel-text: $sel-text + " ~ ";
        $sel-nav: $sel-nav + " ~ ";
      }
    }
    // add output to selector
    $sel-text: $sel-text + " ~ section .output-#{$g}:after";
    $sel-nav: $sel-nav + " ~ nav div:nth-child(#{$g}):after";
    // if not the last group, add comma
    @if $g != $seq-count {
      $sel-text: $sel-text + ", ";
      $sel-nav: $sel-nav + ", ";
    }
  }
  
  // add output content
  #{$sel-text} {
    content: "#{map-get($item, char)}";
  }
  // add nav content
  #{$sel-nav} {
    content: "“#{map-get($item, char)}”";
    // frustrating that this is req'd, 
    // but i need "nil" to look smaller than a binary value
    font-size: 1em;
  }
}

// binary sequence length
$sel-label: "";
// for each binary sequence
@for $s from 1 through $seq-count {
  // for each binary value
  @for $i from 1 through $seq-length {
    // style label
    $sel-label: $sel-label + "#in-#{$s}-#{$i}:checked ~ nav [for='in-#{$s}-#{$i}']";
    // if not the last binary value, add comma
    @if $i != $seq-length {
      $sel-label: $sel-label + ", ";
    }
  }
  // if not the last group, add comma
  @if $s != $seq-count {
    $sel-label: $sel-label + ", ";
  }
}

$px: 16px;
$per-row: 3;
$label-h: 3 * $px;
$label-w: 1.5 * $px;
$label-gutter: 0.4 * $px;
$label-time: 100ms;
$label-ease: ease-in-out;
$c-on: #D0D102;
$c-on: #FFCC00;
$c-off: #555;
$c-label: #00A1CB;
$c-dark: #616161;
$c-dark: #313131;
$c-light: #FFFDF7;

// styling active label
#{$sel-label} {
  background: lighten($c-on, 30%);
  &::after { 
    top: $label-h / 2 + $label-gutter / 2;
    background: $c-on;
    box-shadow: inset 0px 0px 0px 2px darken($c-on, 5%);
  }
}

// body style
body {
  background-color: $c-dark;
  color: $c-light;
  text-align: center;
  padding-top: 2rem;
  overflow-x: hidden;
}

input {
  opacity: 0.5;
  transform: scale(0.9);
  // margin every 8
  &:nth-of-type(8n) { margin-right: 0.5rem; }
  // but not at end of row  
  &:nth-of-type(24n) { margin-right: 0; }
}

// inline-block every 1,2 br
br { 
  display: none;
  &:nth-of-type(3n) { display: block; }
}

@import url(https://fonts.googleapis.com/css?family=Roboto:900italic);
$shad: 1px;

// styling the output
section {
  text-align: center;
  h1 {
    font-size: 4rem;
    font-family: Roboto, sans-serif;
    font-style: italic;
    color: $c-on;
    letter-spacing: 0.025em;
    span {
      text-shadow: -2px -1px 0px lighten($c-on, 30%),
        4px 4px 0px lighten($c-dark, 10%);
    }
  }
}

// styling the labels
$div-w: $label-w * $seq-length + ($label-gutter * ($seq-length - 1));
$div-gutter: 1.2 * $px;
nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  width: $div-w * $per-row + ($div-gutter * $per-row - 1);
  div {
    width: $div-w;
    position: relative;
    display: flex;
    margin-bottom: 2.5 * $px + $div-gutter;
    margin-left: $div-gutter;
    &:hover:after { color: lighten($c-dark, 50%) }
    &:nth-child(#{$per-row}n+1) { margin-left: 0; }
    &::after {
      content: "nil";
      font-size: 0.7em;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      display: block;
      line-height: 2 * $px;
      box-sizing: border-box;
      font-family: Menlo, Andale Mono, monspace;
      padding:  0.5 * $px 0.5rem;
      text-align: center;
      transition: color $label-time $label-ease;
      color: lighten($c-dark, 10%);
    }
    label {
      background: lighten($c-dark, 10%);
      display: block;
      height: $label-h;
      width: $label-w;
      border-radius: 4px;
      position: relative;
      cursor: pointer;
      box-shadow: 
        //inset 0px 0px 0px 1px lighten($c-dark, 20%),
        0px 0px 0px 1px lighten($c-dark, 10%);
      transition: background $label-time $label-ease;
      + label { margin-left: $label-gutter; }
      &::after {
        content: "";
        display: block;
        position: absolute;
        height: $label-h / 2 - $label-gutter;
        width: calc(100% - #{$label-gutter});
        left: $label-gutter / 2;
        top: $label-gutter / 2;
        border-radius: 4px;
        background: $c-off;
        box-shadow: inset 0px 0px 0px 2px darken($c-off, 5%);
        transition: top $label-time $label-ease,
          box-shadow $label-time $label-ease,
          background $label-time $label-ease;
        
      }
    }
  }
}

// styling the map
.map {
  position: fixed;
  top: 0; right: -100px; bottom: 0;
  overflow: auto;
  width: 140px;
  font-size: 0.8em;
  background: $c-dark;
  border: 2px solid lighten($c-dark, 5%);
  font-family: Menlo, Andale Mono, monspace;
  box-sizing: border-box;
  transition: right 200ms ease-in-out;  
  &:hover { right: 0; }
  div {
    display: flex;
    padding: 0.5rem 0.25rem;
    &:nth-child(odd) {
      background: lighten($c-dark, 5%);
    }
    span {
      &:nth-child(odd) { 
        flex: 1; 
        color: $c-on;
      }
      &:nth-child(even) { 
        flex: 3; 
        color: lighten($c-on, 30%);
      }
      text-align: center;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.