/* ============================================================================
   @LAYOUT -> SIDE-BY-SIDE
   ========================================================================= */


/**
 * Place any two elements side-by-side, typically for an image- and text-like
 * content.
 *
 * @markup
   <div class="l-side-by-side [modifier(s)]">
     <div class="l-side-by-side__left"> [...] </div>
     <div class="l-side-by-side__right"> [...] </div>
   </div>
 *
 * @credit
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 */


/**
 * Settings.
 */

// Toggle on/off certain styles and treatments

// Make linear i.e. stack them
$l-side-by-side-apply-linear:       true !default;

// At what breakpoint to make linear? Can be one of the main breakpoints or any
// integer
// N.B. served via a `max-width` media query
$l-side-by-side-apply-linear-when:  palm !default;

// Gutter sizes
$l-side-by-side-gutter-base:        $spacing-base !default;

$l-side-by-side-gutter-tiny:        $spacing-third !default;

$l-side-by-side-gutter-small:       $spacing-half !default;

$l-side-by-side-gutter-large:       $spacing-base-plus-half !default;

$l-side-by-side-gutter-huge:        $spacing-double !default;


/**
 * 1. So it can work on inline elements e.g. `span`.
 */

.l-side-by-side {
  display: block; // [1]

  // Clear fix
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}


  /**
   * Left side.
   */

  .l-side-by-side__left {
    float: left;
    @include to-rem(margin-right, $l-side-by-side-gutter-base);


    /**
     * Modifiers: gutter sizing.
     */

    // Tiny
    .l-side-by-side--gutter-tiny > & {
      @include to-rem(margin-right, $l-side-by-side-gutter-tiny);
    }

    // Small
    .l-side-by-side--gutter-small > & {
      @include to-rem(margin-right, $l-side-by-side-gutter-small);
    }

    // Large
    .l-side-by-side--gutter-large > & {
      @include to-rem(margin-right, $l-side-by-side-gutter-large);
    }

    // Huge
    .l-side-by-side--gutter-huge > & {
      @include to-rem(margin-right, $l-side-by-side-gutter-huge);
    }


    /**
     * Modifiers: reversed.
     *
     * Switch the sides i.e. left becomes right and right becomes left.
     */

    .l-side-by-side--reversed > & {
      float: right;
      margin-right: 0;
      @include to-rem(margin-left, $l-side-by-side-gutter-base);
    }

    // Reversed tiny gutter
    .l-side-by-side--reversed.l-side-by-side--gutter-tiny > & {
      @include to-rem(margin-left, $l-side-by-side-gutter-tiny);
    }

    // Reversed small gutter
    .l-side-by-side--reversed.l-side-by-side--gutter-small > & {
      @include to-rem(margin-left, $l-side-by-side-gutter-small);
    }

    // Reversed large gutter
    .l-side-by-side--reversed.l-side-by-side--gutter-large > & {
      @include to-rem(margin-left, $l-side-by-side-gutter-large);
    }

    // Reversed huge gutter
    .l-side-by-side--reversed.l-side-by-side--gutter-huge > & {
      @include to-rem(margin-left, $l-side-by-side-gutter-huge);
    }


    /**
     * Modifier: flush.
     *
     * Remove the gutter.
     */

    .l-side-by-side--flush > & {
      margin-right: 0;
    }

    // Reversed flush
    .l-side-by-side--reversed.l-side-by-side--flush > & {
      margin-left: 0;
    }


    /**
     * Modifier: remove.
     *
     * Turn off the side-by-side layout so the two elements stack on top of
     * each other at the palm breakpoint (or whatever you specify) and provide
     * bottom spacing between the two elements via the gutter size settings.
     *
     * Make optional as this uses a fair amount of CSS.
     *
     * N.B. we use a `max-width` media query for this which is something we
     * wouldn't usually do as we build Mobile First however this is simply the
     * most pragmatic way of accomplishing this. Also this layout module's
     * default state is side-by-side, so its stacked state is the exception,
     * rather than the rule.
     */

    @if $l-side-by-side-apply-linear {
      @include respond-to($l-side-by-side-apply-linear-when, max) {

        .l-side-by-side--remove > & {
          float: none;
          margin-right: 0;
          margin-left: 0;
          @include to-rem(margin-bottom, $l-side-by-side-gutter-base);
        }


          /**
           * Modifiers: bottom spacing sizing.
           */

          // Tiny
          .l-side-by-side--remove.l-side-by-side--gutter-tiny > & {
            @include to-rem(margin-bottom, $l-side-by-side-gutter-tiny);
          }

          // Small
          .l-side-by-side--remove.l-side-by-side--gutter-small > & {
            @include to-rem(margin-bottom, $l-side-by-side-gutter-small);
          }

          // Large
          .l-side-by-side--remove.l-side-by-side--gutter-large > & {
            @include to-rem(margin-bottom, $l-side-by-side-gutter-large);
          }

          // Huge
          .l-side-by-side--remove.l-side-by-side--gutter-huge > & {
            @include to-rem(margin-bottom, $l-side-by-side-gutter-huge);
          }


          /**
           * Modifier: flush.
           *
           * Remove the bottom spacing.
           */

          .l-side-by-side--remove.l-side-by-side--flush > & {
            margin-bottom: 0;
          }
      }

    }
  }


  /**
   * Right side.
   *
   * 1. Create a new block formatting context (NBFC).
   * 2. Avoid shrink-wrap behavior of table-cell.
   */

  .l-side-by-side__right {
    display: table-cell; // [1]
    width: 10000px; // [2]
  }