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


/**
 * This is the same as the default Side-by-side layout module however it
 * utilises `display: table[-cell];` to give us control over vertical
 * alignment.
 *
 * @markup
   <div class="l-side-by-side-alt [modifier(s)]">
     <div class="l-side-by-side-alt__left"> [...] </div>
     <div class="l-side-by-side-alt__right"> [...] </div>
   </div>
 *
 * @credit
 * https://github.com/inuitcss/objects.flag/blob/master/_objects.flag.scss
 */


/**
 * Settings.
 */

// Toggle on/off certain styles and treatments

// Make linear i.e. stack them
$l-side-by-side-alt-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-alt-apply-linear-when:  palm !default;

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

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

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

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

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


/**
 * 1. Allows us to control vertical alignments.
 * 2. Force to be the full width of its parent. Combined with [1], this makes
 *    the layout module behave in a quasi-`display: block;` manner.
 */

.l-side-by-side-alt {
  display: table; // [1]
  width: 100%; // [2]
}


/**
 * Modifier: reversed.
 */

.l-side-by-side-alt--reversed {
  direction: rtl;
}


/**
 * Modifier: shrink-wrap.
 *
 * Make it be the width of it's content not it's parent as per the default.
 */

.l-side-by-side-alt--shrink-wrap {
  width: auto;
}


/**
 * Modifier: layout-fixed.
 *
 * This makes table and column widths set by the widths of `table` and `col`
 * elements or by the width of the first row of cells. Cells in subsequent rows
 * do not affect column widths.
 */

.l-side-by-side-alt--layout-fixed {
  table-layout: fixed;
}


/**
 * Modifier: make linear.
 *
 * 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-alt-apply-linear {
  @include respond-to($l-side-by-side-alt-apply-linear-when, max) {
    .l-side-by-side-alt--remove {
      direction: ltr;
    }
  }
}


  /**
   * The two sides of the layout module. There should only ever be one of each.
   *
   * 1. Default to aligning content to their middles.
   */

  .l-side-by-side-alt__left,
  .l-side-by-side-alt__right {
    display: table-cell;
    vertical-align: middle; // [1]


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

    .l-side-by-side-alt--reversed > & {
      direction: ltr;
    }


    /**
     * Modifiers: vertical alignments.
     */

    // Top
    .l-side-by-side-alt--top > & {
      vertical-align: top;
    }

    // Bottom
    .l-side-by-side-alt--bottom > & {
      vertical-align: bottom;
    }


    /**
     * Modifier: make linear.
     */

    @if $l-side-by-side-alt-apply-linear {
      @include respond-to($l-side-by-side-alt-apply-linear-when, max) {
        .l-side-by-side-alt--remove > & {
          display: block;
        }
      }
    }
  }


  /**
   * Left side.
   */

  .l-side-by-side-alt__left {
    @include to-rem(padding-right, $l-side-by-side-alt-gutter-base);


    /**
     * Modifiers: gutter sizing.
     */

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

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

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

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


    /**
     * Modifiers: reversed.
     *
     * 1. Reassign paddings to the correct sides.
     */

    .l-side-by-side-alt--reversed > & {
      padding-right: 0; // [1]
      @include to-rem(padding-left, $l-side-by-side-alt-gutter-base); // [1]
    }

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

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

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

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


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

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

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


    /**
     * Modifier: make linear.
     */

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

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


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

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

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

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

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


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

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


      /**
       * Need to turn off responsive images otherwise it breaks.
       */

      > img {
        max-width: none;


        /**
         * Modifier: remove.
         *
         * Bring back responsive images for stacked version.
         */

        @if $l-side-by-side-alt-apply-linear and $apply-responsive-images {
          @include respond-to($l-side-by-side-alt-apply-linear-when, max) {
            max-width: 100%;
          }
        }
      }
  }