// Grid system
//
// Generate semantic grid using CSS Grid (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).

// Framework Grid generation
// This mixin generate default grid system with given columns and with specific gap
@mixin make-grid($columns-number: $grid-columns-number, $gap: map-get($grid-breakpoints-gap, "sm")) {
  display: grid;
  grid-gap: $gap;
  grid-template-columns: repeat($columns-number, minmax(0, 1fr));
  grid-template-rows: auto;
  margin-right: auto;
  margin-left: auto;
}

@mixin make-grid-fluid {
  width: 100%;
}

@mixin make-grid-max-widths($max-widths: $grid-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }
  }
}

// Define min media query.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

// Define max media query.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

// Define between media query.
@mixin media-breakpoint-between($breakpoint, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($breakpoint, $breakpoints);
  $max: breakpoint-max($breakpoint, $breakpoints);
  @warn "#{$breakpoint} - #{$min} - #{$max}";

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      @content;
    }
  }
}