// ** Number of columns in the grid.
@use "sass:math";

$grid-columns: 12 !default;

// ** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width: 20px !default;

@mixin new-calc-grid-column($index, $class, $type) {
  @if $type == width and $index > 0 {
    .gui-layout-col-#{$class}-#{$index} {
      flex: 0 1 math.percentage(math.div($index, $grid-columns));
      width: math.percentage(math.div($index, $grid-columns));
    }
  }

  @if $type == offset {
    .gui-layout-col-#{$class}-offset-#{$index} {
      margin-left: math.percentage(math.div($index, $grid-columns));
    }
  }
}

@mixin new-loop-grid-columns($columns, $class, $type) {
  @for $i from 0 through $columns {
    @include new-calc-grid-column($i, $class, $type);
  }
}

@mixin new-make-grid($class) {
  @include new-loop-grid-columns($grid-columns, $class, width);
  @include new-loop-grid-columns($grid-columns, $class, offset);
}

@mixin new-make-grid-columns(
  $i: 1,
  $list:
    ".gui-layout-col-xs-#{$i}, .gui-layout-col-sm-#{$i}, .gui-layout-col-md-#{$i}, .gui-layout-col-lg-#{$i}"
) {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .gui-layout-col-xs-#{$i}, .gui-layout-col-sm-#{$i}, .gui-layout-col-md-#{$i}, .gui-layout-col-lg-#{$i}";
  }
  #{$list} {
    position: relative;

    // Prevent columns from collapsing when empty
    min-height: 1px;

    // Inner gutter via padding
    padding-right: math.floor(($grid-gutter-width * 0.5));
    padding-left: math.ceil(($grid-gutter-width * 0.5));
  }
}

@include new-make-grid-columns;
@include new-make-grid(xs);

@media (min-width: $screen-sm-min) {
  @include new-make-grid(sm);
}

@media (min-width: $screen-md-min) {
  @include new-make-grid(md);
}

@media (min-width: $screen-lg-min) {
  @include new-make-grid(lg);
}

.gui-layout-grid {
  margin-right: auto;
  margin-left: auto;
}

.gui-layout-row {
  flex-wrap: wrap;
  display: flex;
}