/* ==========================================================================
   COVER OBJECT
   ========================================================================== */

/**
 * Place any text as a cover from an image.
 *
 * 1. Opinionated placement of background image.
 */

.o-cover {
  display: flex;

  background-position: center; /* [1] */
  background-size: cover; /* [1] */
}


/**
 * 1. Center the body into parent element.
 *    https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6
 */

.o-cover__body {
  margin: auto; /* 1 */
  padding: $global-spacing-unit;





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

  .o-cover--flush & {
    padding: 0;
  }

  .o-cover--tiny & {
    padding: $global-spacing-unit-tiny;
  }

  .o-cover--small & {
    padding: $global-spacing-unit-small;
  }

  .o-cover--large & {
    padding: $global-spacing-unit-large;
  }

  .o-cover--huge & {
    padding: $global-spacing-unit-huge;
  }





  /* Alignment variants.
    ========================================================================= */

  /**
   * Vertically align the image- and body-content differently.
   */

  .o-cover--top & {
    margin-top: 0;
  }

  .o-cover--bottom & {
    margin-bottom: 0;
  }

  .o-cover--left & {
    margin-left: 0;
  }

  .o-cover--right & {
    margin-right: 0;
  }
}