//
// "Flow" module for the Zen Grids system.
//


@import "grids";

// @see http://next.zengrids.com/reference/flow/#zen-auto-include-grid-item-base
$zen-auto-include-flow-item-base  : true        !default;


//
// Apply this to an HTML item that is in the normal flow of a document to help
// align it to the grid. @see http://next.zengrids.com/reference/flow/#zen-float
//
@mixin zen-grid-flow-item(
  $column-span,
  $parent-column-span           : false,
  $alpha-gutter                 : false,
  $omega-gutter                 : true,
  $direction                    : $zen-direction,
  $columns                      : $zen-columns,
  $gutters                      : $zen-gutters,
  $gutter-method                : $zen-gutter-method,
  $grid-width                   : $zen-grid-width,
  $box-sizing                   : $zen-box-sizing,
  $switch-direction             : $zen-switch-direction,
  $auto-include-flow-item-base  : $zen-auto-include-flow-item-base
) {

  // Save the columns and gutters from the parent context.
  $main-columns: $columns;
  $main-gutters: $gutters;
  $main-grid-width: $grid-width;

  // Find the parent context for fluid layouts.
  @if unit($grid-width) == "%" {
    // The number of columns the parent element spans is our new column count.
    @if $parent-column-span != false {
      $columns: $parent-column-span;
    }
    @else {
      // If we don't know the number of columns the parent element spans, then
      // warn the user and force the flow item to span 100% of the parent.
      @warn "For responsive layouts with a percentage-based grid width, you must set the $parent-column-span to the number of columns that the parent element spans.";
      $column-span: $columns;
    }
    // We want our inner grid to span the entire width of the parent.
    $grid-width: 100%;
  }

  // Determine the flow direction and its reverse.
  $dir: $direction;
  @if $switch-direction {
    $dir: zen-direction-switch($dir);
  }
  $rev: zen-direction-switch($dir);

  // Calculate the new gutters when the layout and gutters are both fluid.
  @if unit($grid-width) == "%" and unit($gutters) == "%" {
    // Calculate the parent's width.
    $parent-width: zen-grid-item-width($parent-column-span, $main-columns, $main-gutters, $gutter-method, $main-grid-width, $box-sizing);
    // Calculate the new gutters.
    $gutters: $main-gutters * ($grid-width / $parent-width);
  }

  // Auto-apply the unit base mixin.
  @if $auto-include-flow-item-base {
    @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
  }

  // Calculate the item's width.
  $width: zen-grid-item-width($column-span, $columns, $gutters, $gutter-method, $grid-width, $box-sizing);
  @if $gutter-method == padding and unit($grid-width) != "%" and not $alpha-gutter and not $omega-gutter and $box-sizing == border-box {
    $width: $width - $gutters;
  }
  width: $width;

  @if $gutter-method == margin {
    @if $alpha-gutter {
      margin-#{$dir}: $gutters;
    }
    @if $omega-gutter {
      margin-#{$rev}: $gutters;
    }
  }
  @else if unit($grid-width) == "%" {
    // Our percentage $width is off since the parent has $main-gutters padding.
    // Calculate an adjusted gutter to fix the width.
    $adjusted-gutter: ($columns - $column-span) * $gutters / $columns;

    // Ensure the HTML item either has a full gutter or no gutter on each side.
    padding-#{$dir}: 0;
    @if $alpha-gutter {
      margin-#{$dir}: $gutters;
    }
    padding-#{$rev}: $adjusted-gutter;
    @if $omega-gutter {
      margin-#{$rev}: $gutters - $adjusted-gutter;
    }
    @else {
      margin-#{$rev}: -($adjusted-gutter);
    }
  }
  @else {
    @if $alpha-gutter and $omega-gutter {
      @if $gutters != 0 {
        margin: {
          #{$dir}: zen-half-gutter($gutters, left, $dir);
          #{$rev}: zen-half-gutter($gutters, right, $dir);
        }
      }
    }
    @else if not $alpha-gutter and not $omega-gutter {
      @if $gutters != 0 {
        padding: {
          left: 0;
          right: 0;
        }
      }
    }
    @else if $omega-gutter {
      padding-#{$dir}: 0;
      padding-#{$rev}: $gutters;
    }
    @else {
      padding-#{$dir}: $gutters;
      padding-#{$rev}: 0;
    }
  }
}

//
// Apply this to flow items that need to be floated.
// @see http://next.zengrids.com/reference/flow/#zen-float
//
@mixin zen-float(
  $direction          : $zen-direction,
  $switch-direction   : $zen-switch-direction
) {
  // Determine the float direction.
  $dir: $direction;
  @if $switch-direction {
    $dir: zen-direction-switch($dir);
  }
  float: $dir;
}