/*------------------------------------
  Heights
------------------------------------*/

$i: 5;
@while $i < 100 {
  .g-height-#{$i}vh {
    height: #{$i}vh;
  }
  $i: $i + 5;
}

$i: 10;
@while $i < 200 {
  .g-height-#{$i}px {
    height: #{$i}px;
  }
  $i: $i + 2;
}

$i: 200;
@while $i < 800 {
  .g-height-#{$i}px {
    height: #{$i}px;
  }
  $i: $i + 20;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    $i: 50;
    @while $i < 100 {
      .g-height-#{$i}x#{$infix} {
        height: #{$i}#{"%"};
      }
      .g-max-height-#{$i}x#{$infix} {
        max-height: #{$i}#{"%"};
      }

      .g-min-height-#{$i}x#{$infix} {
        min-height: #{$i}#{"%"};
      }

      $i: $i + 10;
    }

    $i: 5;
    @while $i < 100 {
      .g-height-#{$i}vh {
        height: #{$i}vh;
      }

      .g-max-height-#{$i}vh#{$infix} {
        max-height: #{$i}vh !important;
      }

      .g-min-height-#{$i}vh#{$infix} {
        min-height: #{$i}vh !important;
      }
      $i: $i + 5;
    }

    $i: 5;
    @while $i < 100 {
      .g-height-#{$i}vh {
        height: #{$i}vh;
      }

      .g-max-height-#{$i}vh#{$infix} {
        max-height: #{$i}vh !important;
      }

      .g-min-height-#{$i}vh#{$infix} {
        min-height: #{$i}vh !important;
      }
      $i: $i + 5;
    }

    $i: 10;
    @while $i < 200 {
      .g-height-#{$i}px#{$infix} {
        height: #{$i}px;
      }
      $i: $i + 2;
    }

    $i: 200;
    @while $i < 800 {
      .g-height-#{$i}px#{$infix} {
        height: #{$i}px;
      }
      $i: $i + 20;
    }

    /* Auto Height */
    .g-height-auto#{$infix} {
      height: auto;
    }
  }
}
