<div class="search-boxen">
<div class="search-result">
  <div class="benchmarks table">
    <ul class="table-header">
      <li class="th"></li>
      <li class="th"><label>Category 1</label></li>
      <li class="th"><label>Category 2</label></li>
      <li class="th"><label>Category 3</label></li>
    </ul>
    
    <ul class="table-body"> 
      <li class="tr">
        <span class="metric td">1,000 <label>Metric 1</label></span>
        <span class="td percentile-76"><span class="number">76</span></span>
        <span class="td percentile-87"><span class="number">87</span></span>
        <span class="td percentile-32"><span class="number">32</span></span>
      </li>
      <li class="tr">
        <span class="metric td">2,000 <label>Metric 1</label></span>
        <span class="td percentile-67"><span class="number">67</span></span>
        <span class="td percentile-98"><span class="number">98</span></span>
        <span class="td percentile-42"><span class="number">42</span></span>
      </li>
      <li class="tr">
        <span class="metric td">3,000 <label>Metric 1</label></span>
        <span class="td percentile-60"><span class="number">60</span></span>
        <span class="td percentile-91"><span class="number">91</span></span>
        <span class="td percentile-38"><span class="number">38</span></span>
      </li>
      <li class="tr">
        <span class="metric td">4,000 <label>Metric 1</label></span>
        <span class="td percentile-72"><span class="number">72</span></span>
        <span class="td percentile-82"><span class="number">82</span></span>
        <span class="td percentile-40"><span class="number">40</span></span>
      </li>
      <li class="tr">
        <span class="metric td">2,000 <label>Metric 1</label></span>
        <span class="td percentile-70"><span class="number">70</span></span>
        <span class="td percentile-80"><span class="number">80</span></span>
        <span class="td percentile-25"><span class="number">25</span></span>
      </li>
    </ul>
  </div>
    <legend></legend>
</div>
</div>

/*------------------------------------------------------------------


Functions - list functions taken directly or inspired by http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/


-------------------------------------------------------------------*/

@function calcRem($target) {
  @return ($target / 16) + rem;
}

@function calcEm($target, $context: 12) {
  @return ($target / $context) * 1em;
}

// create an arbitrary list of numbers
@function sequence($start, $end) {
  $seq: $start;

  @for $i from $start through $end {
    $x: nth($seq, length($seq)) + 1;
    $seq: append($seq, $x);
  }
 
  @return $seq;
}

// get first item in a list
@function first($list) {
  @return nth($list, 1);
}

// get last item in a list
@function last($list) {
  @return nth($list, length($list));
}


/*------------------------------------------------------------------


Variables


-------------------------------------------------------------------*/

$primary-color: #333;

$mobile: 76em;

$fonts: (junction-bold, junction-light, junction-regular, leaguegothic-condensed-italic, leaguegothic-condensed-regular, leaguegothic-italic, leaguegothic-regular);
@each $font in $fonts {
  @font-face {
    font-family: $font;
      src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1643/#{$font}.eot');
      src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1643/#{$font}.eot?#iefix') format('embedded-opentype'), 
           url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1643/#{$font}.woff') format('woff'), 
           url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1643/#{$font}.ttf')  format('truetype');
  }
}

$font-sizes: (1, 2, 3, 4, 5, 6, 7 ,8, 9, 10, 11, 12, 13, 14, 18, 20, 24, 30, 36, 48, 64, 72, 96, 144, 288);


/*------------------------------------------------------------------


Placeholders and Mixins


-------------------------------------------------------------------*/

%inlineBlock {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
}

@each $font-size in $font-sizes {
  %font#{$font-size} {
    font-size: calcEm( $font-size )
  }
}

/*------------------------------------------------------------------


The meat and potatoes - relies on the list functions at the top of this file


-------------------------------------------------------------------*/

// set up the color stops - mess with these to change the gradient
$color-stop-1: hsl(107, 41.0526%, 62.7451%);
$color-stop-2: hsl(177, 42.9752%, 52.5490%);
$color-stop-3: hsl(263, 30.0000%, 60.7843%);
$color-stop-4: hsl(360, 74.8792%, 59.4118%);

// set up percentile ranges 
$top-tier: sequence(67, 99);
$mid-tier: sequence(34, 66);
$bottom-tier: sequence(1, 33);

// mixin to mix the colors 
@mixin tileStyle($color1, $color2, $range) {
  @for $i from first($range) through last($range) {
    $value: index($range, $i) / length($range) * 100;
    $shade: darken(mix($color1, $color2, $value), 15%);
  
    .percentile-#{$i} {
      background: mix($color1, $color2, $value);
      .number {
        text-shadow: .080em .080em $shade;
      }
    }
  }
}

// call the mixin for each percentile grouping
.table {
  @include tileStyle($color-stop-1, $color-stop-2, $top-tier);
  @include tileStyle($color-stop-2, $color-stop-3, $mid-tier);
  @include tileStyle($color-stop-3, $color-stop-4, $bottom-tier);
}


/*------------------------------------------------------------------


Style all the things


-------------------------------------------------------------------*/

* {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
}


body {
  background-size: cover;
  font-family: 'junction-light';
  font-size: calcEm( 14 );
  color: $primary-color;
  line-height: 1rem;
}

ul {
  list-style-type: none;
  padding: 0;
}

.search-result {
  color: $primary-color;
  margin: 1em 0 1em 0;
  padding: 0 1em;
}

.table {
  display: table;
  margin-top: 0;
}

.table-header, .table-body {
  display: table-header-group;
}

.table-header {
  @extend %font18;
  text-transform: uppercase;
  .th {
    padding-bottom: .5em;
    text-align: center;
    label {
      @extend %font6;
      display: block;
      margin-top: .7em;
    }
  }
}

.table-body {
  li {
    display: table-row;
    width: 100%;
  }
  .td {
    border: 2px solid #FFF;
    padding: .5em 0;
    line-height: 1em;
    &.metric {
      @extend %font18;
      border-bottom-color: #EFEFEF;
      border-top-color: #EFEFEF;
      label {
        @extend %font6;
        text-transform: uppercase;
        display: block;
      }
      span {
        @extend %font7;
        text-transform: uppercase;
      }
    }
    &:not(.metric) {
      color: #FFF;
      @extend %font24;
      line-height: 1.2em;
      .number {
        @extend %inlineBlock;
        padding-top: .3em;
      }
    }
  }
}

.tr {
  &:first-child {
    .metric {
      border-top: none;
    }
  }
  &:last-child {
    .metric {
      border-bottom: none;
    }
  }
}

.th, .td {
  display: table-cell;
  width: 16%;
  text-align: center;
}

legend {
  position: relative;
  margin: 2em 0 1em 0;
  width: 100%;
  height: 1em;
  background-image: linear-gradient(to left, $color-stop-1, $color-stop-2, $color-stop-3, $color-stop-4);
  &:before {
    position: absolute;
    content: '1st percentile';
    left: 0;
    margin-top: -1.5em;
    @extend %font8;
  }
  &:after {
    position: absolute;
    content: '99th percentile';
    right: 0;
    margin-top: -1.5em;
    @extend %font8;
  }
}

.benchmarks {
  @extend %inlineBlock;
  width: 100%;
}