/**
 * The pack object simply causes any number of elements pack up horizontally to
 * automatically fill an equal, fluid width of their parent.
 *
 * @package  generator-mh-boilerplate
 * @author   Martin Herweg <info@martinherweg.de>
 * @author   David Hellmann <davidhellmann.com@gmail.com>
 * @author   Harry Roberts <https://github.com/inuitcss/inuitcss>
 */

/*
|--------------------------------------------------------------------------
| _objects.pack.scss
|--------------------------------------------------------------------------
*/

/**
 * 1. Fill all available space.
 * 2. Remove any leftover styling from lists.
 * 3. Cause children to be automatically equally sized.
 */


.o-pack {
  display: table;
  width: 100%; /* [1] */
  margin-left: 0; /* [2] */
  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 items
|--------------------------------------------------------------------------
*/


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



/*
|--------------------------------------------------------------------------
| Size variants
|--------------------------------------------------------------------------
*/


.o-pack--tiny {
  border-spacing: space(1);
}

.o-pack--small {
  border-spacing: space(2);
}

.o-pack--large {
  border-spacing: space(3);
}

.o-pack--huge {
  border-spacing: space(4);
}



/*
|--------------------------------------------------------------------------
| Reversed order packs
|--------------------------------------------------------------------------
*/


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

  > .o-pack__item {
    direction: ltr;
  }

}