/* ============================================================================
   @UTILITIES -> NEW BLOCK FORMATTING CONTEXT (NBFC)
   ========================================================================= */


/**
 * This affords some useful properties to the element. It won't wrap under
 * floats. Will also contain any floated children.
 *
 * N.B. this is one of the rare occasions where the class/placeholder is
 * shortened.
 *
 * All the utilities (available as silent placeholder selectors also):
 *
   .u-nbfc
   .u-nbfc-alt
 *
 * @demo
 * http://s.codepen.io/chris-pearce/full/zxRQwV
 *
 * @credit
 * https://github.com/suitcss/utils-layout/blob/master/lib/layout.css
 */


/**
 * Settings.
 */

/**
 * Apply at these breakpoints (turned off by default).
 */

$u-nbfc-apply-at-breakpoints:               $default-breakpoints !default;

// From the above breakpoints choose which utilities you wish to apply it too
$u-nbfc-apply-at-breakpoints-for-default:   false !default;

$u-nbfc-apply-at-breakpoints-for-alt:       false !default;


/**
 * 1. Create a new block formatting context (NBFC).
 * 2. Avoid shrink-wrap behavior of table-cell.
 *
 * N.B. this breaks down in some browsers when elements within this element
 * exceed its width.
 */

%u-nfbc,
.u-nbfc {
  display: table-cell !important; // [1]
  width: 10000px !important; // [2]
}

@if $u-nbfc-apply-at-breakpoints-for-default {
  @include generate-at-breakpoints('.u-nbfc', $u-nbfc-apply-at-breakpoints) {
    display: table-cell !important;
    width: 10000px !important;
  }
}


/**
 * Alternate version.
 *
 * N.B. this will clip overflow. Best to go with the default version above.
 */

%u-nbfc-alt,
.u-nbfc-alt {
  overflow: hidden !important;
}

@if $u-nbfc-apply-at-breakpoints-for-alt {
  @include generate-at-breakpoints('.u-nbfc-alt',
    $u-nbfc-apply-at-breakpoints) {
    overflow: hidden !important;
  }
}