// ---------------------------------------------------------------------------
// Grid helpers
// Functions and mixins used in and with ezy grid

// ---------------------------------------------------------------------------
// @function layout-width
// 
// Returns width based on given number of culumns
// $columns :   Number of columns to calculate width from
// @return  :   Width in the same unit as $column-width and $gutter-width

@function layout-width( $columns ) {
  @if comparable( $column-width, $gutter-width ) {
    @return $columns * ( $column-width + $gutter-width ) - $gutter-width;
  } @else {
    @warn "$column-width and $gutter-width must have the same unit set. #{ unit($column-width) }'s and #{ unit($gutter-width) }'s are not comparable.";
  }
}

// ---------------------------------------------------------------------------
// @function grid-width
// 
// Returns full width of a grid, based on number of columns. 
// Similar to layout width, but adds grid padding
// $columns       :   Number of columns to calculate width from
// $grid-padding  :   Grid padding to add on both sides of layout width. 
//                :   Defaults to globally set $grid-padding
// @return        :   Width in the same unit as $column-width, $gutter-width and $grid-padding

@function grid-width( 
  $columns, 
  $grid-padding: $grid-padding 
  ) {
  @if type-of( $grid-padding ) == "list" {
    // If grid padding is set as 2 values (in case left 
    // and right are not the same), add the two
    $grid-padding: nth( $grid-padding, 1 ) + nth( $grid-padding, 2 );
  }
  @if comparable( layout-width( $columns ), $grid-padding ) {
    @return layout-width( $columns ) + $grid-padding * 2;
  } @else {
    @warn "$grid-padding must have the same unit as $column-width and $gutter-width. #{ unit( $grid-padding ) }'s and #{ unit( layout-width( $columns ) ) }'s are not comparable.";
  }
}

// ---------------------------------------------------------------------------
// @function context-width
// 
// Returns width based on given number of culumns, plus an extra gutter
// Used for % calculations in the grid
// $columns :   Number of columns to calculate width from
// @return  :   Width in the same unit as $column-width and $gutter-width

@function context-width( $columns ) {
  @return layout-width( $columns ) + $gutter-width;
}

// ---------------------------------------------------------------------------
// @function columns
// 
// Same as layout-width( $columns ), but renamed for better context awareness

@function span-column-width( $columns ) {
  @return layout-width( $columns );
}

// ---------------------------------------------------------------------------
// @function columns
// 
// Returns a span columns width. If the grid is fluid, it will be as a 
// percentage of the context width

@function columns( 
  $columns, 
  $context: $total-columns 
  ) {
  @if $is-fluid and $context {
    @return percentage-round( layout-width( $columns ) / context-width( $context ) );
  } @else if $is-fluid {
    @warn $context-warn;
  } @else {
    @return layout-width( $columns ); 
  } 
}

// ---------------------------------------------------------------------------
// @function gutter
// 
// Returns gutter in the same unit as $gutter-width if grid is static
// Returns gutter as a percentage of the context if grid is fluid
// $context :   Number of columns in the current context. 
//          :   If set to false, the returned value is as in static grid 
// @return  :   Width as $gutter-width or as a percentage of the context

@function gutter(
  $context: $total-columns
  ) {
  @if $is-fluid and $context {
    @return ( percentage-round( ( $gutter-width ) / context-width( $context ) ) );
  } @else if $is-fluid {
    @warn $context-warn;
  } @else {
    @return $gutter-width; 
  }
}

// ---------------------------------------------------------------------------
// @mixin gutters
// 
// Sets gutters using the gutter( $context ) function
// $context           :   Number of columns in the current context. 
//                    :   Only mandatory if grid is fluid 
// $gutter-property   :   Set to "margin" or "padding"

@mixin gutters( 
  $context          : $total-columns,
  $gutter-property  : $gutter-property
  ) {
  @if $gutter-property == "margin" or $gutter-property == "padding" {
    #{ $gutter-property }: {
      left: gutter( $context ) / 2;
      right: gutter( $context ) / 2;
    }
  } @else {
    @warn "$gutter-property must be set to either 'margin' or 'padding'";
  }
}

// ---------------------------------------------------------------------------
// @mixin offset
// 
// Applies offset to the left/right. The offset is based on
// a number of columns
// $direction         :   Which direction to apply the offset
// $columns           :   Number of columns to offset with 
// $context           :   Number of columns in the current context
// $gutter-property   :   Which gutter property the gutter is set with.
//                    :   Affects the way the offset is applied

@mixin offset(
  $direction,
  $columns,
  $context          : $total-columns,
  $gutter-property  : $gutter-property
  ) {
  /* Offset #{ $direction } by #{ $columns } columns */
  $offset: columns( $columns, $context ) + gutter( $context ) * 1.5;
  @if $gutter-property == "padding" {
    $offset: columns( $columns, $context ) + gutter( $context );
  }
  @if $direction == "both" {
    margin: {
      left: $offset;
      right: $offset;
    }
  } @else {
    margin-#{ $direction }: $offset;
  }
}

// ---------------------------------------------------------------------------
// @mixin pullout
// Pulls the column out to the left/right with a negative margin
// $direction         :   Which direction to apply the pull
// $columns           :   Number of columns to pull 
// $context           :   Number of columns in the current context
// $gutter-property   :   Which gutter property the gutter is set with.
//                    :   Affects the way the pull is applied

@mixin pullout(
  $direction,
  $columns,
  $context          : $total-columns,
  $gutter-property  : $gutter-property
  ) {
  /* Pull out to the #{ $direction } by #{ $columns } columns */
  $offset: columns( $columns, $context ) + gutter( $context ) / 2;
  @if $gutter-property == "padding" {
    $offset: columns( $columns, $context ) + gutter( $context );
  }
  margin-#{ $direction }: -($offset);
}

// ---------------------------------------------------------------------------
// @mixin reset
// Resets a column to its original state from a pullout or offset
// $direction         :   Which direction to reset.
//                    :   Defaults to "both"
// $context           :   Number of columns in the current context
// $gutter-property   :   Which gutter property the gutter is set with.
//                    :   Used to re-apply gutter in the right property

@mixin reset(
  $direction        : "both",
  $context          : $total-columns,
  $gutter-property  : $gutter-property
  ) {
  @if $gutter-property == "padding" {
    @if $direction == "both" {
      margin: {
        left: 0;
        right: 0;
      }
    } @else {
      margin-#{ $direction }: 0;
    }
  } @else {
    @if $direction == "both" {
      @include gutters( $context, $gutter-property );
    } @else {
      #{ $gutter-property }-#{ $direction }: gutter( $context ) / 2;
    }
  }
}

// ---------------------------------------------------------------------------
// @mixin remove-offset
// Mapping @mixin reset()

@mixin remove-offset(
  $direction        : "both",
  $context          : $total-columns,
  $gutter-property  : $gutter-property
  ) {
  /* Removing offset #{ $direction } */
  @include reset( 
    $direction        : $direction, 
    $context          : $context, 
    $gutter-property  : $gutter-property 
  );
}

// ---------------------------------------------------------------------------
// @mixin remove-pullout
// Mapping @mixin reset()

@mixin remove-pullout(
  $direction        : "both",
  $context          : $total-columns,
  $gutter-property  : $gutter-property
  ) {
  /* Removing pullout #{ $direction } */
  @include reset( 
    $direction        : $direction, 
    $context          : $context, 
    $gutter-property  : $gutter-property 
  );
}