@mixin suiGridGutter($size) {
  margin-left: -$size !important;
  margin-top: -$size * 0.5 !important;
  margin-bottom: -$size * 0.5 !important;

  & > * {
    padding-left: $size !important;
    padding-top: $size * 0.5 !important;
    padding-bottom: $size * 0.5 !important;
  }
}

@mixin suiGridGutterVertical($size) {
  margin-top: -$size * 0.5 !important;
  margin-bottom: -$size * 0.5 !important;

  & > * {
    padding-top: $size * 0.5 !important;
    padding-bottom: $size * 0.5 !important;
  }
}

@mixin suiGridGutterHorizontal($size) {
  margin-left: -$size !important;

  & > * {
    padding-left: $size !important;
  }
}

@mixin suiGridGutterModifiers($suffix, $size) {
  &.as--gutter-#{ $suffix } {
    @include suiGridGutter($size);
  }

  &.as--gutter-vertical-#{ $suffix } {
    @include suiGridGutterVertical($size);
  }

  &.as--gutter-horizontal-#{ $suffix } {
    @include suiGridGutterHorizontal($size);
  }
}

@mixin suiGridItemSizeModifier($suffix: '') {
  // -------------------------
  //    Fluid
  // -------------------------
  &.as--1_8#{ $suffix } {
    max-width: 12.5%;
    flex-basis: 12.5%;
  }

  &.as--1_7#{ $suffix } {
    max-width: 14.2857142857%;
    flex-basis: 14.2857142857%;
  }

  &.as--1_6#{ $suffix } {
    max-width: 16.6666666666%;
    flex-basis: 16.6666666666%;
  }

  &.as--1_5#{ $suffix } {
    max-width: 20%;
    flex-basis: 20%;
  }

  &.as--1_4#{ $suffix },
  &.as--2_8#{ $suffix } {
    max-width: 25%;
    flex-basis: 25%;
  }

  &.as--2_7#{ $suffix } {
    max-width: 28.5714285714%;
    flex-basis: 28.5714285714%;
  }

  &.as--1_3#{ $suffix },
  &.as--2_6#{ $suffix } {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }

  &.as--3_8#{ $suffix } {
    max-width: 37.5%;
    flex-basis: 37.5%;
  }

  &.as--2_5#{ $suffix } {
    max-width: 40%;
    flex-basis: 40%;
  }

  &.as--3_7#{ $suffix } {
    max-width: 42.8571428571%;
    flex-basis: 42.8571428571%;
  }

  &.as--1_2#{ $suffix },
  &.as--2_4#{ $suffix },
  &.as--3_6#{ $suffix },
  &.as--4_8#{ $suffix } {
    max-width: 50%;
    flex-basis: 50%;
  }

  &.as--4_7#{ $suffix } {
    max-width: 57.1428571428%;
    flex-basis: 57.1428571428%;
  }

  &.as--3_5#{ $suffix } {
    max-width: 60%;
    flex-basis: 60%;
  }

  &.as--5_8#{ $suffix } {
    max-width: 62.5%;
    flex-basis: 62.5%;
  }

  &.as--2_3#{ $suffix },
  &.as--4_6#{ $suffix } {
    max-width: 66.6666666666%;
    flex-basis: 66.6666666666%;
  }

  &.as--5_7#{ $suffix } {
    max-width: 71.4285714285%;
    flex-basis: 71.4285714285%;
  }

  &.as--3_4#{ $suffix },
  &.as--6_8#{ $suffix } {
    max-width: 75%;
    flex-basis: 75%;
  }

  &.as--4_5#{ $suffix } {
    max-width: 80%;
    flex-basis: 80%;
  }

  &.as--5_6#{ $suffix } {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }

  &.as--6_7#{ $suffix } {
    max-width: 85.7142857142%;
    flex-basis: 85.7142857142%;
  }

  &.as--7_8#{ $suffix } {
    max-width: 87.5%;
    flex-basis: 87.5%;
  }

  &.as--full#{ $suffix },
  &.as--1_1#{ $suffix },
  &.as--2_2#{ $suffix },
  &.as--3_3#{ $suffix },
  &.as--4_4#{ $suffix },
  &.as--5_5#{ $suffix },
  &.as--6_6#{ $suffix },
  &.as--7_7#{ $suffix },
  &.as--8_8#{ $suffix } {
    max-width: 100%;
    flex-basis: 100%;
  }
}

@mixin suiGridModifiers($suffix: '') {
  &.as--auto#{ $suffix } {
    & > * {
      flex-grow: 0;
      max-width: none;
      flex-basis: auto;
    }
  }

  &.as--fill#{ $suffix } {
    & > * {
      flex-grow: 1;
      max-width: none;
      flex-basis: auto;
    }
  }

  &.as--stretch#{ $suffix } {
    align-items: stretch;

    & > * {
      display: flex;
      flex-direction: column;
    }

    & > * > * {
      flex: 1 0 auto;
    }
  }

  &.as--full#{ $suffix } {
    flex-grow: 1;
  }

  &.as--no-wrap#{ $suffix } {
    flex-wrap: nowrap;
  }

  &.as--start#{ $suffix } {
    justify-content: flex-start;
  }

  &.as--center#{ $suffix } {
    justify-content: center;
  }

  &.as--end#{ $suffix } {
    justify-content: flex-end;
  }

  &.as--top#{ $suffix } {
    align-items: flex-start;
  }

  &.as--middle#{ $suffix } {
    align-items: center;
  }

  &.as--bottom#{ $suffix } {
    align-items: flex-end;
  }

  &.as--between#{ $suffix } {
    justify-content: space-between;
  }

  &.as--around#{ $suffix } {
    justify-content: space-around;
  }

  &.as--reverse#{ $suffix } {
    flex-direction: row-reverse;
  }

  // -------------------------
  // Gutters
  // -------------------------
  @include suiGridGutterModifiers(none#{ $suffix }, 0);
  @include suiGridGutterModifiers(xxs#{ $suffix }, $sui-space-xxs);
  @include suiGridGutterModifiers(xs#{ $suffix }, $sui-space-xs);
  @include suiGridGutterModifiers(sm#{ $suffix }, $sui-space-sm);
  @include suiGridGutterModifiers(md#{ $suffix }, $sui-space-md);
  @include suiGridGutterModifiers(lg#{ $suffix }, $sui-space-lg);
  @include suiGridGutterModifiers(xl#{ $suffix }, $sui-space-xl);
  @include suiGridGutterModifiers(xxl#{ $suffix }, $sui-space-xxl);
}

@mixin suiGridItemModifiers($suffix: '') {
  &.as--pull#{ $suffix } {
    order: -1;
    margin-right: auto;
    flex: none;
  }

  &.as--push#{ $suffix } {
    order: 11;
    margin-left: auto;
    flex: none;
  }

  &.as--first#{ $suffix } {
    order: -2;
  }

  &.as--last#{ $suffix } {
    order: 12;
  }

  &.as--top#{ $suffix } {
    align-self: flex-start;
  }

  &.as--middle#{ $suffix } {
    align-self: center;
  }

  &.as--bottom#{ $suffix } {
    align-self: flex-end;
  }

  &.as--flex-none#{ $suffix } {
    flex: none;
  }

  &.as--auto#{ $suffix } {
    max-width: none;
    flex-basis: auto;
  }

  &.as--fill#{ $suffix } {
    flex-grow: 1;
    max-width: none;
    flex-basis: auto;
  }

  // -------------------------
  //    Order modifiers
  // -------------------------
  @for $i from 0 through 10 {
    &.as--order-#{ $i }#{ $suffix } {
      order: #{ $i };
    }
  }

  // -------------------------
  //    Width modifiers
  // -------------------------
  @include suiGridItemSizeModifier($suffix);
}
