@import "../settings/settings.grid";
@import "../settings/settings.globalVars";
@import "../tools/tools.grid";
@import "../tools/tools.breakpoints";

.qd-columns {
  display: grid;
  grid-column-gap: $gridColumnGap;

  @for $desktopGridSize from 1 through $desktopMaxGridSize {
    &.qd-columns-#{$desktopGridSize} {
      @include setResponsiveGridSize($desktopGridSize);
      @include setResponsiveColspans($desktopGridSize);

      @for $columnsMax from 1 to $desktopGridSize {
        &.qd-columns-max-#{$columnsMax} {
          @include setResponsiveGridSize($columnsMax);
          @include setResponsiveGridMarginRightForColumnsMax($desktopGridSize, $columnsMax);
          @include setResponsiveColspans($columnsMax);
        }
      }
    }
  }

  // classes to override colspan for specific breakpoints
  .qd-column {
    @each $breakpoint, $windowWidth in get-breakpoint-map($settings) {
      @include for-screen-only($breakpoint) {
        @for $colspan from 1 through $desktopMaxGridSize {
          &.#{$breakpoint}-#{$colspan} {
            grid-column: span $colspan !important;
          }
        }
      }
    }
  }
}
