$breakpoint-names: settings($settings, "grid.breakpoint.names");
$breakpoint-sizes: settings($settings, "grid.breakpoint.sizes");
$row: #{settings($settings, "define.row.class")};
$column: #{settings($settings, "define.column.class")};
$grid-total: settings($settings, "grid.total");

@mixin row($settings: ()) {
  $row-settings: map-merge(
    (
      gap: 0,
      total: $grid-total,
    ),
    $settings
  );
  display: grid;
  grid-auto-flow: row;
  grid-column-gap: value(gap, map-get($row-settings, gap));
  grid-row-gap: value(gap, map-get($row-settings, gap));
  --row-columns: repeat(
    #{value(row-total, #{map-get($row-settings, total)})},
    1fr
  );
  grid-template-columns: value(row-columns);
  grid-template-rows: auto;
}

@mixin column($pref: null, $add: null) {
  @each $size-name, $size-value in $breakpoint-sizes {
    $className: "";
    @if $pref {
      $className: unquote("#{$add}#{$pref}--#{$size-name}");
    } @else {
      $className: unquote("#{$add}.#{$size-name}");
    }
    #{$className} {
      $grid-total-fifth: $grid-total * $size-value;

      @if $grid-total-fifth != ceil($grid-total-fifth) {
        grid-column: span (25 * $size-value);
      } @else {
        grid-column: span ($grid-total * $size-value);
      }
    }
  }
}

@mixin grid-row() {
  #{$row} {
    @include row();
  }
  #{$row}#{$row}--fifths {
    @include row(
      (
        total: 25,
      )
    );
  }
}

@mixin grid-column() {
  #{$column} {
    width: 100%;
    &--middle {
      display: flex;
      align-items: center;
    }
    &--center {
      display: flex;
      justify-content: center;
    }
  }
}