

// Gumby Semantic Grid Mixin //


// Mixin for rows

@mixin row($nested: false) {
  @if $nested == nested {
    width: auto;
    min-width: 0px;
    max-width: none;
    @extend %clearfix;
  }
  @else {
    width: 100%;
    max-width: $row-max-width;
    min-width: $min-device-width;
    margin: 0 auto;
    @extend %clearfix;
  }
  > *:first-child {
    margin-left: 0px;
  }
  @include respond(document-width) {
    padding: 0 20px;
  }
  @include respond(all-phones) {
    width: auto;
    min-width: 0;
    margin-left: 0; 
    margin-right: 0;
  }
}

// Mixin for rows that are nested within columns

@mixin nestedRow() {
  width: auto;
  min-width: 0px;
  max-width: none;
  @extend %clearfix;
}


@mixin column($columns:$columns, $alignment: false, $behavior: false) {
  @if $alignment == center   {
    @extend %columnconfig;
    float: none;
    margin-left: auto !important;
    margin-right: auto !important;
    width: columns($columns);
    @include respond(all-phones) {
      float: left;
      margin-left: 0;
      width: 100%;
    }
  }
  @else if $behavior == collapse {
    @extend %columnconfig;
    @extend %collapse;
    width: columns($columns);
    @include respond(all-phones) {
      float: left;
      width: 100%;
    }
  }
  @else {
    @extend %columnconfig;
    width: columns($columns);
    @include respond(all-phones) {
      float: left;
      margin-left: 0;
      width: 100%;
    }
  }
}

@mixin hybrid($columns:$columns, $alignment: false, $behavior: false) {
  @if $alignment == center   {
    @extend %columnconfig;
    float: none;
    margin-left: auto !important;
    margin-right: auto !important;
    width: columns($columns, true);
    @include respond(all-phones) {
      float: left;
      margin-left: 0;
      width: 100%;
    }
  }
  @else if $behavior == collapse {
    @extend %columnconfig;
    @extend %collapse;
    width: columns($columns, true);
    @include respond(all-phones) {
      float: left;
      width: 100%;
    }
  }
  @else {
    @extend %columnconfig;
    width: columns($columns, true);
    @include respond(all-phones) {
      float: left;
      margin-left: 0;
      width: 100%;
    }
  }
}

@mixin push($columns, $hybrid-grid: false) {
  @if $hybrid-grid == hybrid {
    margin-left: push_x($columns, false, true);
    &:first-child {
      margin-left: push_x($columns, true, true);
    }
    @include respond(all-phones) {
      margin-left: 0;
      &:first-child {
        margin-left: 0;
      }
    }
  }
  @else {
    margin-left: push_x($columns);
    &:first-child {
      margin-left: push_x($columns, true);
    }
    @include respond(all-phones) {
      margin-left: 0;
      &:first-child {
        margin-left: 0;
      }
    }
  }
}

@mixin pull($direction:false) {
  @if $direction == left {
    @extend %pull-left;
  }
  @elseif $direction == none {
    @extend %pull-none;
  }
  @else {
    @extend %pull-right;
  }
}


// Placeholders for the Semantic Grid

%container {
  padding: 0px $gutter-in-px + px;
  @include respond(all-phones) {
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

// Clearfix placeholder
%clearfix { @include clearfix(); }

// Clearfix placeholder for mobile
%mobilefix { @include mobilefix(); }

// Row placeholders
%row { @include row(); }
%nestedrow { @include row(); }

// Column Configuration placeholder
%columnconfig {
  margin-left: $gutter;
  float: $default-float;
  min-height: 1px;
  position: relative;
  @include box-sizing(border-box);
}

%pull-right { float: right; }
%pull-left { float: left; }
%pull-none { float: none; }

// Collapse Gutters
%collapse {
  margin-left: 0px;
}
