@use "sass:map";
@use "utils";
@use "variables";

@each $breakpoint in map.keys(variables.$grid-breakpoints) {
  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
  $size: map.get(variables.$grid-breakpoints, $breakpoint);

  @media (min-width: $size) {
    @for $i from 1 through variables.$grid-columns {
      .fwe-col#{$infix}-#{$i} {
        grid-column-end: span $i;
      }

      .fwe-grid-line-break#{$infix} {
        grid-column-start: 1;
      }

      @if $i < variables.$grid-columns {
        .fwe-offset#{$infix}-#{$i} {
          grid-column-start: $i + 1;
        }
      }
    }
  }
}

.fwe-grid {
  display: grid;
  grid-template-columns: repeat(variables.$grid-columns, 1fr);
  gap: variables.$grid-gap;

  &.fwe-no-gap {
    gap: 0px;
  }

  &.fwe-no-row-gap {
    row-gap: 0px;
  }

  &.fwe-no-col-gap {
    column-gap: 0px;
  }
}