/* ==========================================================================
 * PACK OBJECT
 *
 * The pack object creates a single row of packed items containing equal
 * widths and heights. The child items automatically fill the full width of
 * the parent object.
 *
 * Includes modifiers for applying auto-widths and gutter sizes to
 * pack items, useful for generating tabs UIs.
 *
 * <ul class="o-pack o-pack--xs o-pack--auto">
 *   <li class="o-pack__item"></li>
 * </ul>
 *
 * 1. Fill all available space.
 * 2. Remove any leftover styling from lists.
 * 3. Cause children to be automatically equally sized.
 * ========================================================================== */

.o-pack {
  width: 100%; /* [1] */
  margin-left: 0; /* [2] */
  display: table;
  table-layout: fixed; /* [3] */
}


/**
 * 1. Cause children to adopt table-like structure.
 * 2. Default item alignment is with the tops of each other.
 */
.o-pack__item {
  display: table-cell; /* [1] */
  vertical-align: top; /* [2] */



  /* Vertical Alignment Variants
   * --------------------------- */

  .o-pack--middle > & {
    vertical-align: middle;
  }

  .o-pack--bottom > & {
    vertical-align: bottom;
  }
}




/* Unequal-width items.
 * ========================================================================== */

.o-pack--auto {
  table-layout: auto;
}




/* Size variants.
 * ========================================================================== */

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




/* Reversed order packs
 * ========================================================================== */

.o-pack--reverse {
  direction: rtl;

  > .o-pack__item {
    direction: ltr;
  }
}