// ┌───────────┐
// │ Container │
// └───────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/grid/#container
//  ↳ grid → _container.md

@mixin grid-container() {
  @include clearfix();
  width: $container-width;
  max-width: $max-width;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  @include box-sizing(border-box);
}

// ┌─────────┐
// │ Columns │
// └─────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/grid/#columns
//  ↳ grid → _columns.md

%column {
  @include box-sizing(border-box);
  width: $container-width;
  max-width: 100%;
  padding-left: $column-gutter / 2;
  padding-right: $column-gutter / 2;
  @include left();
}

@mixin column()  {
  [class*="#{$prefix}column-"]:first-of-type {
    html:not([dir="rtl"]) & {
      margin-left: -$column-gutter / 2;
    }
    @if ($include-right-to-left) {
      html[dir="rtl"] & {
        margin-right: -$column-gutter / 2;
      }
    }
  }
  [class*="#{$prefix}column-"]:last-of-type {
    html:not([dir="rtl"]) & {
      margin-right: -$column-gutter / 2;
    }
    @if ($include-right-to-left) {
      html[dir="rtl"] & {
        margin-left: -$column-gutter / 2;
      }
    }
  }
  &:last-of-type { @include clearfix(); }
}

// ┌────────────────┐
// │ First and Last │
// └────────────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/grid/#first-and-last
//  ↳ grid → _first-and-last.md

@mixin first-column() {
  html:not([dir="rtl"]) & {
    margin-left: -($column-gutter/2);
  }
  @if ($include-right-to-left) {
    html[dir="rtl"] & {
      margin-right: -$column-gutter / 2;
    }
  }
}

@mixin last-column() {
  html:not([dir="rtl"]) & {
    margin-right: -($column-gutter / 2);
  }
  @if ($include-right-to-left) {
    html[dir="rtl"] & {
      margin-left: -$column-gutter / 2;
    }
  }
}

// ┌────────────────────┐
// │ Responsive Columns │
// └────────────────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/grid/#responsive-columns
//  ↳ grid → _responsive-columns.md

@mixin responsive-column() {

  @for $n from 1 through $default-column-count {
    .#{$prefix}column-#{$n} {
      width: ($n / $default-column-count) * $container-width;
      max-width: ($n / $default-column-count) * $max-width;
      > .#{$prefix}column-#{$n} {
        margin-left: -($column-gutter/2);
        margin-right: -$column-gutter / 2;
      }
    }
  }

  @if $fold-grid == true {

    // Medium Columns
    @media screen and (max-width: $medium - 1) {
      @for $n from 1 through $medium-column-count {
        .#{$prefix}column-#{$n} {
          width: ($n / $medium-column-count) * $container-width;
          max-width: ($n / $medium-column-count) * $max-width;
        }
      }
      @for $n from $medium-column-count through $default-column-count {
        .#{$prefix}column-#{$n} {
          width: (1) * $container-width;
          max-width: (1) * $max-width;
        }
      }
      @for $n from 1 through $medium-column-count {
        .#{$prefix}#{$medium-class}-column-#{$n}  {
          width: ($n / $medium-column-count) * $container-width;
          max-width: ($n / $medium-column-count) * $max-width;
        }
      }
      .#{$prefix}#{$medium-class}-first-column {
        html:not([dir="rtl"]) & {
          margin-left: -($column-gutter / 2);
        }
        @if ($include-right-to-left) {
          html[dir="rtl"] & {
            margin-right: -$column-gutter / 2;
          }
        }
      }
      .#{$prefix}#{$medium-class}-last-column {
        html:not([dir="rtl"]) & {
          margin-right: -($column-gutter / 2);
        }
        @if ($include-right-to-left) {
          html[dir="rtl"] & {
            margin-left: -$column-gutter / 2;
          }
        }
      }
    }

    // Small Columns
    @media screen and (max-width: $small - 1) {
      @for $n from 1 through $small-column-count {
        .#{$prefix}column-#{$n} {
          width: ($n / $small-column-count) * $container-width;
          max-width: ($n / $small-column-count) * $max-width;
        }
      }
      @for $n from $small-column-count through $default-column-count {
        .#{$prefix}column-#{$n} {
          width: (1) * $container-width;
          max-width: (1) * $max-width;
        }
      }
      @for $n from 1 through $small-column-count {
        .#{$prefix}#{$medium-class}-column-#{$n} {
          width: ($n / $small-column-count) * $container-width;
          max-width: ($n / $small-column-count) * $max-width;
        }
      }
      @for $n from $small-column-count through $default-column-count {
        .#{$prefix}#{$medium-class}-column-#{$n} {
          width: (1) * $container-width;
          max-width: (1) * $max-width;
        }
      }
      @for $n from 1 through $small-column-count {
       .#{$prefix}#{$small-class}-column-#{$n} {
          width: ($n / $small-column-count) * $container-width;
          max-width: ($n / $small-column-count) * $max-width;
        }
      }
      .#{$prefix}#{$small-class}-first-column {
        margin-left: -($column-gutter / 2);
        @if ($include-right-to-left) {
          html[dir="rtl"] & {
            margin-left: 0;
            margin-right: -$column-gutter / 2;
          }
        }
      }
      .#{$prefix}#{$small-class}-last-column {
        margin-right: -($column-gutter / 2);
        @if ($include-right-to-left) {
          html[dir="rtl"] & {
            margin-right: 0;
            margin-left: -$column-gutter / 2;
          }
        }
      }
    }
  }
}

@if $include-grid == true {
  @for $n from 1 through $large-column-count {
    .#{$prefix}column-#{$n} {
      @extend %column;
    }
  }

  [class*="#{$prefix}column-"] { @include column(); }

  @media screen {
    .#{$prefix}grid-container {
      @include grid-container();
    }
  }

  @media screen and (min-width: $large) {
    @if unit($container-width) == 'vw' {
      .#{$prefix}grid-container {
        $diff: $large-column-count - $default-column-count;
        $side: $diff / 2;
        $margin: $side / $large-column-count * $container-width;
        padding-left: $margin;
        padding-right: $margin;
      }
      .#{$prefix}grid-full {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  @media screen {
    .#{$prefix}first-column {
      @include first-column();
    }
    .#{$prefix}last-column {
      @include last-column();
    }
  }

  @include responsive-column();

  .center-column {
    margin-left: auto !important; // !important needed to override first column margin (line 34)
    margin-right: auto !important; // !important needed to override last column margin (line 43)
    float: none;
  }
}
