/*
 *  This object implements a common pattern where an image is placed beside some content.
 *  http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 *
 *  This variant uses flexbox instead of floats
 */

@use "../abstract/functions" as fns;

.o-#{fns.get-ns()}Media {
  display: flex;
  align-items: flex-start;
}

.o-#{fns.get-ns()}Media-body {
  display: block;
  flex-grow: 1;

  &,
  > :where(:last-child) {
    margin-bottom: 0;
  }
}

.o-#{fns.get-ns()}Media-image {
  margin-right: var(--aml-size-md);

  :where(img) {
    display: block;
  }
}

/*
 *  Vertically center the image and body
 */
.o-#{fns.get-ns()}Media--center {
  align-items: center;
}

/*
 *   Show the image on the right side instead of the left side.
 */
.o-#{fns.get-ns()}Media--reverse {
  flex-direction: row-reverse;

  > :where(.o-#{fns.get-ns()}Media-image) {
    margin-right: 0;
    margin-left: var(--aml-size-md);
  }
}