// Mixins: Grid

@use 'sass:math';
@use '../functions' as *;

// Set auto fit grid template.
// @param {String} $item-min-width Pixel value to set a minimum column width.
// @param {String} $gutter-width Pixel value for width of column gutters.
@mixin set-css-autofit-columns($item-min-width, $gutter-width) {
  grid-template-columns: repeat(auto-fit, minmax(#{$item-min-width}, 1fr));

  @if $gutter-width {
    grid-gap: rem($gutter-width);
  }
}

// Set fixed grid template.
// @param {Number} $columns Number of columns. 1 or 0 result in a single column.
// @param {String} $gutter-width Pixel value for width of column gutters.
@mixin set-css-fixed-columns($columns, $gutter-width) {
  $column-adjust: if($columns < 1, 1, $columns);
  grid-template-columns: repeat($column-adjust, 1fr);

  @if $gutter-width {
    grid-gap: rem($gutter-width);
  }
}

// Create auto fit grid
// @param {String} $item-min-width Pixel value to set a minimum column width.
// @param {String} $gutter-width Pixel value for width of column gutters.
@mixin css-autofit-grid(
  $item-min-width: 300px,
  $gutter-width: gesso-get-map(gutter-width)
) {
  @include set-css-autofit-columns($item-min-width, $gutter-width);
  display: grid;
}

// Create fixed grid.
// @param {Number} $columns Number of columns. 1 or 0 result in a single column.
// @param {String} $gutter-width Pixel value for width of column gutters.
@mixin css-fixed-grid($columns: 1, $gutter-width: gesso-get-map(gutter-width)) {
  @include set-css-fixed-columns($columns, $gutter-width);
  display: grid;
}
