/* ==========================================================================
   OBJECTS / #MEDIA
   ========================================================================== */

/**
 * The Media Object is the poster-child of the OOCSS methodology. It simply
 * places any image-like content next to any text-like content.
 *
 * For further and philosophical reading about OOCSS in general, please see:
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 *
 */
.o-media {
  @include clearfix();
}

.o-media__body {
  overflow: hidden;
}

.o-media__img {
  float: left;
  margin-right: $global-spacing-unit;
}

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

/**
 * Smaller spacing between media items.
 */
.o-media--narrow {
  > .o-media__img {
    margin-right: $global-spacing-unit-small;
  }
}

/**
 * Wider spacing between media items.
 */
.o-media--wide {
  > .o-media__img {
    margin-right: $global-spacing-unit-large;
  }
}

/**
 * No spacing between media items.
 */
.o-media--flush {
  > .o-media__img {
    margin-right: 0;
  }
}

/**
 * Swap the image and body around.
 */
.o-media--reverse {
  > .o-media__img {
    float: right;
    margin-right: 0;
    margin-left: $global-spacing-unit;

    /**
     * Adjust our previously defined modifiers to work in reverse.
     */
    .o-media--narrow & {
      margin-left: $global-spacing-unit-small;
    }

    .o-media--wide & {
      margin-left: $global-spacing-unit-large;
    }

    .o-media--flush & {
      margin-left: 0;
    }
  }
}