/*
 * Responsiv grid
 */

@use '../abstracts/variables';
@use '../abstracts/mixins/breakpoints' as *;

.pkt-grid {
  @each $bp-name, $bp-value in variables.$breakpoints {
    @if $bp-value != 0 {
      @include bp-up($bp-value) {
        @each $sp-name, $sp-value in variables.$spacing {
          &--gap-#{$sp-name}-#{$bp-name}-up {
            gap: $sp-value;
          }
          &--colgap-#{$sp-name}-#{$bp-name}-up {
            column-gap: $sp-value;
          }
          &--rowgap-#{$sp-name}-#{$bp-name}-up {
            row-gap: $sp-value;
          }
        }
      }
    }
  }

  & > .pkt-cell,
  & > * > .pkt-cell {
    @each $bp-name, $bp-value in variables.$breakpoints {
      @if $bp-value != 0 {
        @include bp-up($bp-value) {
          @for $i from 1 through 12 {
            &.pkt-cell--span#{$i}-#{$bp-name}-up {
              grid-column-end: span $i;
            }
          }

          @for $i from 1 through 13 {
            &.pkt-cell--start#{$i}-#{$bp-name}-up {
              grid-column-start: $i;
            }
            &.pkt-cell--end#{$i}-#{$bp-name}-up {
              grid-column-end: $i;
            }
          }
        }
      }
    }
  }
}