@use '../../compiled/tokens/scss/breakpoint';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/media-query';
@use '../../mixins/ms';

/**
 * 1. Middle-align child elements. This will take effect when the content is
 *    shorter than the object.
 * 2. It's important to include `minmax` even for the content column, because
 *    if not, a flex or grid container within could break outside the bounds
 *    of the content.
 */

.o-media {
  align-items: center; /* 1 */
  display: grid;
  grid-gap: size.$spacing-media-gap;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr); /* 2 */
}

/**
 * Reverse column layout for the `reverse` modifier.
 */

.o-media--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}

/**
 * 1. This will take effect when the object is shorter than the content, making
 *    the whole element appear top-aligned in that case.
 * 2. To encourage a semantic document outline, we decouple this element's
 *    visual order from its markup order.
 */

.o-media__object {
  align-self: start; /* 1 */
  order: -1; /* 2 */
}

/**
 * Modifier: Align Start
 *
 * Uses `align-items: start` instead of `align-items: center`
 */

.o-media--align-start {
  align-items: start;
}

/**
 * Modifier: Generous Gap
 *
 * Increases the size of the gap between the media object and content.
 */

.o-media--generous {
  column-gap: ms.step(3);
}

/**
 * Modifier: Reverse
 *
 * Swap gap position and visual order.
 */

.o-media--reverse .o-media__object {
  order: 1;
}

/**
 * Modifier: Jaunty
 *
 * Applies a fun rotation to the media object, and a bit of margin to
 * compensate for the rotation.
 *
 * 1. Limits the width of the element so that the transform-origin is correct,
 * even in browsers which don't support CSS grid.
 */

.o-media--jaunty .o-media__object {
  display: inline-block; /* 1 */
  margin-inline: ms.step(-4);
  transform: rotate(-5deg);
}

.o-media--reverse.o-media--jaunty .o-media__object {
  transform: rotate(5deg);
}

/**
 *  Modifier: Content Sizing
 *
 * This modifier lets us use fractional units to size media content in relation
 * to the object. This should make it easier to align the content of multiple
 * media elements, even when the objects differ in size.
 */

@for $i from 1 through 4 {
  .o-media--1-by-#{$i} {
    @include media-query.breakpoint-classes($from: s, $to: xl) {
      grid-template-columns: 1fr #{$i}fr;

      .o-media__object {
        justify-self: center;
      }
    }
  }
}