@use "../config";
@use "../utils/generators";
@use "../utils/helpers";
@use 'sass:math';

.grid {
  display: flex;
  flex-flow: row wrap;
}

.grid-gutter {
  margin-left: math.div(-(config.$grid-gutter-mobile),2);
  margin-right: math.div(-(config.$grid-gutter-mobile),2);

  @include generators.breakpoint(config.$container-breakpoint) {
    margin-left: math.div(-(config.$grid-gutter),2);
    margin-right: math.div(-(config.$grid-gutter),2);
  }

  &.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: config.$container-offset-mobile - math.div(config.$grid-gutter-mobile,2);
    padding-right: config.$container-offset-mobile - math.div(config.$grid-gutter-mobile,2);

    @include generators.breakpoint(config.$container-breakpoint) {
      margin-left: auto;
      margin-right: auto;
      padding-left: config.$container-offset - math.div(config.$grid-gutter,2);
      padding-right: config.$container-offset - math.div(config.$grid-gutter,2);
    }
  }

  > [class*='col-'] {
    padding-left: math.div(config.$grid-gutter-mobile,2);
    padding-right: math.div(config.$grid-gutter-mobile,2);

    @include generators.breakpoint(config.$container-breakpoint) {
      padding-left: math.div(config.$grid-gutter,2);
      padding-right: math.div(config.$grid-gutter,2);
    }
  }
}

@include generators.grid-column-generator(config.$columns);
@include generators.grid-offset-generator(config.$columns);
@include generators.grid-column-max-generator(config.$columns);

.grid-reverse {
  flex-direction: row-reverse;
}