/* stylelint-disable @stylistic/indentation */
/* stylelint-disable @stylistic/function-parentheses-space-inside */

/**
* Mixins to build grid system.
*/
:root {
  --gap: #{$grid-gap};
  --half-gap: calc(#{$grid-gap} / 2);
  --gutter: #{$grid-gutter};

  @include media-down(md) {
    --gap: #{$grid-gap-mobile};
    --half-gap: calc(#{$grid-gap-mobile} / 2);
    --gutter: #{$grid-gutter-mobile};
  }

  @include media-down(xs) {
    --gutter: 12px;
  }
}

/* display Grid */
@mixin grid-cols($i, $fr: 1fr) {
  @if $i == 'none' or $i == 0 {
    grid-template-columns: none;
  } @else if $i == 'subgrid' or $i == -1 {
    display: grid;
    gap: var(--gap);
    grid-template-columns: subgrid;
  } @else {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat($i, minmax(0, $fr));
  }
}

@mixin col-start($i) {
  grid-column-start: $i;
}

@mixin col-end($i) {
  grid-column-end: $i + 1;
}

@mixin col-span($i) {
  @if $i == 'full' or $i == 0 {
    grid-column: 1 / -1;
  } @else {
    grid-column: span $i / span $i;
  }
}

/**
* Grid column container mixin.
*/

@mixin grid-container-fluid {
  inline-size: stretch;
  padding-inline: $grid-gutter;
  margin: 0 auto;
  max-inline-size: $container-max-width;

  @include media-down(md) {
    padding-inline: $grid-gutter-mobile;
  }

  @include media-down(xs) {
    padding-inline: $spacing-xsm;
  }
}

@mixin grid-container {
  @include grid-container-fluid;

  @each $breakpoint, $width in $grid-breakpoints {
    @if $breakpoint != xs and $width <= $container-max-width {
      @media (min-width: $width) {
        --max-width-break: calc(#{$width} - (var(--gutter) * 2));
        max-width: $width;
        // padding-inline: 0;
      }
    } @else {
      --max-width-break: calc(100vw - (var(--gutter) * 2));
    }
  }
}

@mixin grid {
  display: grid;
  gap: var(--gap);
  // @include grid-cols($grid-columns);
}