/* ==========================================================================
 * BOX OBJECT
 *
 * The box object simply boxes off content. Extend with cosmetic styles in the
 * Components layer.
 * ========================================================================== */

/**
 * 1. So we can apply the `.o-box` class to naturally-inline elements.
 * 2. Applies default padding. Override with size modifier classes.
 *    <div class="o-box o-box--xs">
 */
.o-box {
  @include clearfix();
  display: block; /* [1] */
  padding: $globalSpacing; /* [2] */

  > :last-child {
    margin-bottom: 0;
  }
}




/* Size Variants
 * ========================================================================== */

@each $spacingName, $spacingFactor in $globalSpacingFactors {
  .o-box#{$spacingName} {
    padding: ($globalSpacing * $spacingFactor);
  }
}