// ┌──────────────┐
// │ Pre and Post │
// └──────────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/grid/#pre-and-post
//  ↳ grid → _pre-and-post.md

@mixin responsive-pre-post(){
  // point where container width is exactly $vw-ratio (.96) of screen width
  $container-plus-buffer: $container-width / $vw-ratio;
  @if $fold-grid == true {
    // Normal Columns
    @media screen and (min-width: $medium) and (max-width: $container-plus-buffer) {
      @for $n from 0 through $default-column-count {
        .pre-#{$n} {
          @include pre($n, $default-column-count);
        }
        .first-column.pre-#{$n} {
          @include pre-calc($n, $default-column-count);
        }
        .post-#{$n} {
          @include post($n, $default-column-count);
        }
        [class*="#{$prefix}column-"] [class*="#{$prefix}column-"].pre-#{$n}:first-of-type  {
          @include pre-calc($n, $default-column-count);
        }
      }
    }

    // Medium Columns
    @media screen and (max-width: $medium - 1) {
      @for $n from 0 through $medium-column-count {
        .#{$medium-class}-pre-#{$n} {
          @include pre($n, $medium-column-count);
        }
        .#{$medium-class}-first-column.#{$medium-class}-pre-#{$n} {
          @include pre-calc($n, $medium-column-count);
        }
        .#{$medium-class}-post-#{$n} {
          @include post($n, $medium-column-count);
        }
      }
    }

    // Small Columns
    @media screen and (max-width: $small - 1) {
      @for $n from 0 through $small-column-count {
        .#{$small-class}-pre-#{$n} {
          @include pre($n, $small-column-count);
        }
        .#{$small-class}-first-column.#{$small-class}-pre-#{$n} {
          @include pre-calc($n, $small-column-count);
        }
        .#{$small-class}-post-#{$n} {
          @include post($n, $small-column-count);
        }
      }
    }

    // Fixed Pre and Post
    @media screen and (min-width: $container-plus-buffer + 1) {
      @for $n from 0 through $large-column-count {
        $fixed-pre: ($n / $large-column-count) * $container-width - 1;
        $clear: $column-gutter / 2;
        .pre-#{$n} {
          html:not([dir="rtl"]) & {
            margin-left: $fixed-pre;
          }
          html[dir="rtl"] & {
            margin-right: $fixed-pre;
          }
        }
        .post-#{$n} {
          html:not([dir="rtl"]) & {
            margin-right: $fixed-pre;
          }
          html[dir="rtl"] & {
            margin-left: $fixed-pre;
          }
        }
        [class*="#{$prefix}column-"] [class*="#{$prefix}column-"].pre-#{$n}:first-of-type  {
          html:not([dir="rtl"]) & {
            margin-left: calc(#{$fixed-pre} - #{$clear});

          }
          html[dir="rtl"] & {
            margin-right: calc(#{$fixed-pre} - #{$clear});
          }
        }
        [class*="#{$prefix}column-"] [class*="#{$prefix}column-"].post-#{$n}:last-of-type {
          html:not([dir="rtl"]) & {
            margin-right: calc(#{$fixed-pre} - #{$clear});
          }
          html[dir="rtl"] & {
            margin-left: calc(#{$fixed-pre} - #{$clear});
          }
        }
      }
    }

  } @else {
    .pre-#{$n} {
      @include pre($n, $default-column-count);
    }
    .first-column.pre-#{$n} {
      @include pre-calc($n, $default-column-count);
    }
    .post-#{$n} {
      @include post($n, $default-column-count);
    }
  }
}

@if $include-grid == true {
  @include responsive-pre-post();
}
