// =============
// EDGE GRID
// =============

$row-max-width   : 1140px !default;
$total-columns   : 12 !default;
$column-gutter   : 20px !default;

// Calculate percentages for grid
@function gridCalc($colNumber, $totalColumns) {
  // If column specified is not fraction
  @if $colNumber >= 1 {
    @return percentage($colNumber / $totalColumns);
  }
  // If column specified is fraction (like 2/12)
  @else {
    @return percentage($colNumber);
  }
}

// ---------------------------------
// BASE ROW
// - Styling for base framework
// ---------------------------------

@mixin base-row(
  $nest     : false,
  $collapse : false,
  $for-base : false) {

  $width  : $row-max-width;
  $gutter : $column-gutter;
  
  @if $for-base {
    margin: 0 auto;
    width: 100%;
    max-width: $width + $gutter;

    @if not $responsive {
      min-width: $width + $gutter;
    }
    @include clearfix;
  }

  // Nested and collapsed
  @if $nest and $collapse {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    width: auto;
    max-width: none;

    @if not $responsive {
      min-width: 0;
    }
  }
  // Only nested
  @else if $nest {
    margin-right: -($gutter / 2);
    margin-left: -($gutter / 2);
    width: auto;
    max-width: none;

    @if not $responsive {
      min-width: 0;
    }
  }
  // Only collapsed
  @else if $collapse {
    margin: 0 auto;
    width: 100%;
    max-width: $width;
    
    @if not $responsive {
      min-width: $width;
    }
  }
}

// -----------------------------------
// ROW
// - Styling for external mixin call
// -----------------------------------

@mixin row(
  $gutter   : 0px,
  $width    : $row-max-width,
  $collapse : false) {
  
  // If gutter is passed as param, calculate it
  @if $gutter != $column-gutter {
    max-width: $width + $gutter;

    @if not $responsive {
      min-width: $width + $gutter;
    }
  }

  @if $gutter > 0 {
    .row & {
      margin-right: -($gutter / 2);
      margin-left: -($gutter / 2);
    }
  }
}

// ------------------------------
// BASE COLUMN
// - Styling for base framework
// ------------------------------

@mixin base-column(
  $size   : 0,
  $offset : 0,
  $push   : 0,
  $pull   : 0,
  $collapse : false,
  $centered : false,
  $gutter : 0px,
  $total  : $total-columns,
  $for-base : false) {
  
  @if $for-base {
    position: relative;
    float: $default-float;
    padding-right: $column-gutter / 2;
    padding-left: $column-gutter / 2;
  }

  // Collapsed, no gutter
  @if $collapse {
    padding-right: 0;
    padding-left: 0;
  }

  // Offset, calculate margins
  @if $offset > 0 { 
    margin-#{$default-float}: gridCalc($offset, $total);
  }
  
  // Size, calculate width
  @if $size > 0 {
    width: gridCalc($size, $total);
  }

  // Custom Gutter
  @if $gutter > 0 {
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
  }
  
  // Centered, add centered margin
  @if $centered {
    display: block;
    float: none;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  
  // Source Ordering
  @if $push > 0 {
    #{$default-float}: gridCalc($push, $total);
    #{$default-opposite}: auto;
  }

  @if $pull > 0 {
    #{$default-opposite}: gridCalc($pull, $total);
    #{$default-float}: auto;
  } 
}

// -----------------------------------
// COLUMN
// - Styling for external mixin call
// -----------------------------------

@mixin column(
  $size   : 0,
  $small  : 0,
  $mini   : 0,
  $offset : 0,
  $push   : 0,
  $pull   : 0,
  $collapse : false,
  $centered : false,
  $gutter : 0px,
  $total  : $total-columns) {

  // Sizing
  @if $size > 0 {
    @include base-column($size:$size, $total:$total);

    @if $small > 0 {
      @include below(small) {
        @include base-column($size:$small, $total:$total);
      }
    } @else { // else, become 100% width on small
      @include below(small) {
        @include base-column($size:$total, $total:$total);
      }
    }

    @if $mini > 0 {
      @include below(mini) {
        @include base-column($size:$mini, $total:$total);
      }
    }
  }
  
  // Collapse and Centered behavior is the same as base column
  @include base-column(
    $collapse: $collapse,
    $centered: $centered,
    $gutter: $gutter,
    $total: $total
  );

  // Source Ordering, follow base column
  @if $responsive and not $is-in-media {
    // make Offset not inherited in small screen
    @include above(small) {
      @include base-column($offset:$offset, $pull:$pull, $push:$push, $total:$total);
    }
  } @else {
    @include base-column($offset:$offset, $pull:$pull, $push:$push, $total:$total);
  }
}

// ----------------------------------------------
// COLUMN PIXEL
// - Measured with pixel instead of grid portion
// ----------------------------------------------

@mixin column-px(
  $size     : 0px,
  $width    : 0px,
  $gutter   : $column-gutter,
  $centered : false ) {
  
  // Collapse and Centered behavior is the same as base column
  @include base-column(
    $centered: $centered
  );
  
  width: percentage(($size + $gutter) / ($width + $gutter) );
  
  @if $gutter > 0 {
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
  }
}

// ---------------------
// SOURCE ORDERING
// ---------------------
@mixin source-ordering() {
  @for $i from 1 through $total-columns - 1 {
    .large-offset-#{$i},
    .offset-#{$i} {
      @include base-column($offset:$i);
    }
    .push#{-$i} {
      @include base-column($push:$i);
    }
    .pull#{-$i} {
      @include base-column($pull:$i);
    }
  }
}

@if $include-grid and not $user-mode {

/* ------------
  EDGE Grid
------------ */

// Normal row
.row {
  @include base-row($for-base:true);
  
  // Collapsed row
  &.collapse {
    @include base-row($collapse:true);
    .column,
    .columns {
      @include base-column($collapse:true);
    }
  }
  
  // Nested-collapsed row
  .row {
    @include base-row($nest:true);
    &.collapse {
      @include base-row($nest:true, $collapse:true);
    }
  }
}

// Normal column
.column,
.columns {
  @include base-column($size:$total-columns, $for-base:true);
}

// Large sizing
@for $i from 1 through $total-columns {
  .large#{-$i} { @include base-column($size:$i); }
}

// Centered column
.column.large-centered,
.columns.large-centered,
.column.centered,
.columns.centered {
  @include base-column($centered:true);
}

@if $responsive {
  @include above(small) {
    @include source-ordering();
  }
}
// Remove media query so when the window scaled down, the styling isn't gone.
@else {
  @include source-ordering();
}


// Small screen and below
@if $responsive {
  
  @include below(small) {
    .column,
    .columns {
      @include base-column($size:$total-columns);
    }
    @for $i from 1 through $total-columns {
      .small#{-$i} {
        @include base-column($size:$i);
      }
    }

    @for $i from 0 through $total-columns - 2 {
      .small-offset-#{$i} {
        @include base-column($offset:$i);
      }
    }

    .column.small-centered,
    .columns.small-centered {
      @include base-column($centered:true);
    }
  }

} // responsive

} // $include-grid