/***
 * Palette
 *
 * Just a colection of [color](#/molecules/color) elements.  Sizes them mostly
 * based on how many are present.  This is achieved through the utterly ingenious
 * [mod selector](http://alistapart.com/article/using-css-mod-queries-with-range-selectors).
 *
 * Shows the colors as larger if in an element with 'primary' in its title.
 *
 * @modifier [id*="primary"] &
 *
 * html:
 *   <div class="palette">
 *     <div class="color color--dark">
 *       <div class="swatch swatch-- swatch--dark" style="background-color: #FF0000"></div>
 *       <div class="color__details">
 *         <span class="color__var-name" data-copy="$c1">$c1</span>
 *         <span class="color__value color__value--hex" data-copy="#FF0000">#FF0000</span>
 *       </div>
 *     </div>
 *     <div class="color color--dark">
 *       <div class="swatch swatch-- swatch--dark" style="background-color: #EE0000"></div>
 *       <div class="color__details">
 *         <span class="color__var-name" data-copy="$c2">$c2</span>
 *         <span class="color__value color__value--hex" data-copy="#EE0000">#EE0000</span>
 *       </div>
 *     </div>
 *     <div class="color color--dark">
 *       <div class="swatch swatch-- swatch--dark" style="background-color: #DD0000"></div>
 *       <div class="color__details">
 *         <span class="color__var-name" data-copy="$c3">$c3</span>
 *         <span class="color__value color__value--hex" data-copy="#DD0000">#DD0000</span>
 *       </div>
 *     </div>
 *     <div class="color color--dark">
 *       <div class="swatch swatch-- swatch--dark" style="background-color: #CC0000"></div>
 *       <div class="color__details">
 *         <span class="color__var-name" data-copy="$c4">$c4</span>
 *         <span class="color__value color__value--hex" data-copy="#CC0000">#CC0000</span>
 *       </div>
 *     </div>
 *   </div>
 */
.palette {
  @include gridContainer(0);

  .color {
    float: left;
    width: (100% / 3);
    // sexy ass mod selector!
    @include modQuery(4,0,'.color') {
      width: (100% / 4);
    }
    @include modQuery(4,3,'.color') {
      width: (100% / 4);
      @include selectRange(1,3) {
        width: (100% / 3);
      }
    }
  }

  [id*="primary"] &, [id*="brand"] & {
    @include h4;
    .color {
      width: 50%;
      height: $vr * 12;
      @include modFirst(2,1) {
        width: 100%;
      }

      @include modQuery(3,0,'.color') {
        width: (100% / 3);
      }

      @include modQuery(3,1,'.color') {
        width: (100% / 3);
      }
      @include modFirst(3,1) {
        width: 100%;
      }

      @include modQuery(2,0,'.color') {
        width: (100% / 2);
      }
    }
  }
}