@use '../variables/breakpoints.scss';
@use '../mixins/grid.scss';

.kd-grid {
  @include grid.grid;

  &--compact {
    gap: var(--kd-grid-gap-compact);
  }

  &--no-gap {
    gap: 0;
  }

  &--align-left {
    margin: 0;
  }

  &--no-max {
    max-width: none;
  }

  &--full-bleed {
    max-width: none;
    margin-left: var(--kd-page-gutter-negative);
    margin-right: var(--kd-page-gutter-negative);
  }

  // generate sm classes
  @for $i from 1 through 4 {
    &__col--sm-#{$i} {
      @include grid.grid-col($i);
    }
  }

  // generate md classes
  @for $i from 1 through 8 {
    &__col--md-#{$i} {
      @media (min-width: breakpoints.$bp-md) {
        @include grid.grid-col($i);
      }
    }
  }

  // generate lg, xlg, max classes
  @for $i from 1 through 12 {
    &__col--lg-#{$i} {
      @media (min-width: breakpoints.$bp-lg) {
        @include grid.grid-col($i);
      }
    }

    &__col--xl-#{$i} {
      @media (min-width: breakpoints.$bp-xl) {
        @include grid.grid-col($i);
      }
    }

    &__col--max-#{$i} {
      @media (min-width: breakpoints.$bp-max) {
        @include grid.grid-col($i);
      }
    }
  }
}