/* ========================================================================== *\
   Utilities -> Floats ($utilities-floats)
\* ========================================================================== */

//
// Floats
//
// f = float
// l = left
// r = right
// n = none
//

.fl {
  float: left;
}

.fr {
  float: right;
}

.fn {
  float: none;
}

.screens({
  .xs-fl {
    float: left;
  }

  .xs-fr {
    float: right;
  }

  .xs-fn {
    float: none;
  }
},{
  .sm-fl {
    float: left;
  }

  .sm-fr {
    float: right;
  }

  .sm-fn {
    float: none;
  }
},{
  .md-fl {
    float: left;
  }

  .md-fr {
    float: right;
  }

  .md-fn {
    float: none;
  }
},{
  .lg-fl {
    float: left;
  }

  .lg-fr {
    float: right;
  }

  .lg-fn {
    float: none;
  }
},{
  .xl-fl {
    float: left;
  }

  .xl-fr {
    float: right;
  }

  .xl-fn {
    float: none;
  }
},{
  .xxl-fl {
    float: left;
  }

  .xxl-fr {
    float: right;
  }

  .xxl-fn {
    float: none;
  }
});

/**
 * Clearfix
 *
 * 1. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 * 2. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 *
 * @link http://cbrac.co/1FT6aqC
 */

.cf {
  &:before,
  &:after {
    display: table; // 1
    content: " ";   // 2
  }
  &:after {
    clear: both;
  }
}

/**
 * Clear floats with an extra markup element
 *
 * @link http://cbrac.co/SFv1Ua
 */

.clear {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  width: 0;
  height: 0;
}