// Mixins
// ==========================================================================

@mixin clearfix {
  &::after {
    display: block;
    clear: both;
    content: "";
  }

  @include ie-lte(7) {
    zoom: 1;
  }
}


// Swatches
// ==========================================================================

.swatch-section {
  clear: both;
  padding-top: 20px;
}

.swatch-wrapper {
  width: 30%;
  float: left;
}

.swatch {
  width: 150px;
  height: 60px;
  margin-bottom: $gutter-half;
}

.swatch-scss {
  @include core-16;
}

.swatch-hex  {
  display: block;
  font-weight: bold;
  text-transform: uppercase;
}


// Example boxes
// ==========================================================================

.example {
  @extend %contain-floats;
  position: relative;
  overflow: hidden;
  border: 1px solid $grey-2;
  margin-top: $gutter-half;
  margin-bottom: $gutter-half;

  padding-top: $gutter;
  padding-right: $gutter-half;
  padding-bottom: $gutter-half;
  padding-left: $gutter-half;

  @include media(tablet) {
    padding-top: $gutter*1.5;
    padding-right: $gutter;
    padding-bottom: $gutter;
    padding-left: $gutter;
  }
}

.example-preview {
  position: relative;
}

.example:before,
.example-preview:before {
  content: "EXAMPLE";

  position: absolute;
  top: 0;
  left: 0;

  padding: 5px 15px 5px 15px;
  @include core-14;
  background: $grey-2;
  color: white;
}

// Example boxes - Layout - Spacing
// ==========================================================================
.example--spacing img {
  float: left;
  width: 50%;
}
