/* ==========================================================================
   OBJECTS / #FLAG
   ========================================================================== */

/**
 * The Flag Object shares a similar structure to the Media Object, placing any
 * image-like content next to any text-like content, but with greater control on
 * vertical alignment.
 *
 * Please see: https://csswizardry.com/2013/05/the-flag-object/
 *
 * Example usage:
 *
 *   <div class="o-flag">
 *     <div class="o-flag__img">
 *       <img src="" alt=""/>
 *     </div>
 *     <div class="o-flag__body">
 *       <p>Some content</p>
 *     </div>
 *   </div>
 */
.o-flag {
  display: table;
  width: 100%;
}

.o-flag__img,
.o-flag__body {
  display: table-cell;
  vertical-align: middle;
}

.o-flag__img {
  padding-right: $global-spacing-unit;

  /* Fill the img element to the full width of the `__img` container */
  > img {
    display: block;
    max-width: none;
  }
}

.o-flag__body {
  width: 100%;
}

/* Modifiers
   =========================================== */

/* Alignment
  ---------------------------------- */

/**
 * Align the flag image and body to the top.
 */
.o-flag--top {
  > .o-flag__img,
  > .o-flag__body {
    vertical-align: top;
  }
}

/**
 * Align the flag image and body to the bottom.
 */
.o-flag--bottom {
  > .o-flag__img,
  > .o-flag__body {
    vertical-align: bottom;
  }
}

/* Spacing
  ---------------------------------- */

/**
 * Reduce the gutter between image and body.
 */
.o-flag--small {
  > .o-flag__img {
    padding-right: $global-spacing-unit-small;
  }
}

/**
 * Increase the gutter between image and body.
 */
.o-flag--large {
  > .o-flag__img {
    padding-right: $global-spacing-unit-large;
  }
}

/**
 * Reduce the gutter between image and body even further.
 */
.o-flag--tiny {
  > .o-flag__img {
    padding-right: $global-spacing-unit-tiny;
  }
}

/* Order & Structure
  ---------------------------------- */

/**
 * Reverse the rendered order of the Flag Object.
 */
.o-flag--reverse {
  direction: rtl;

  > .o-flag__img,
  > .o-flag__body {
    direction: ltr;
  }

  /**
   * Flip all padding to the left-hand side.
   *
   * 1. If the Flag Object is reversed *and* has modified spacing, flip it with
   *    the appropriate spacing.
   */
  > .o-flag__img {
    padding-left: $global-spacing-unit;
    padding-right: 0;

    @at-root .o-flag--tiny#{&} { /* [1] */
      padding-left: $global-spacing-unit-tiny;
    }

    @at-root .o-flag--small#{&} { /* [1] */
      padding-left: $global-spacing-unit-small;
    }

    @at-root .o-flag--large#{&} { /* [1] */
      padding-left: $global-spacing-unit-large;
    }
  }
}

/**
 * Remove all spacing from the Flag Object.
 */
.o-flag--flush {
  > .o-flag__img {
    padding-left: 0;
    padding-right: 0;
  }
}