/* stylelint-disable */

$namespace-grid: ns(“grid”);

// basic container .#{$namespace-grid}container {

$props: append-important($grid-global, $theme-grid-container-max-width);
@include grid-container($props);

}

// container with custom widths @each $width-key, $width-value in $system-breakpoints {

.#{$namespace-grid}container-#{$width-key} {
  $props: append-important($grid-global, $width-key);
  @include grid-container($props);
}

}

// responsive containers… @each $mq-key, $mq-value in $system-breakpoints {

@if map-get($theme-utility-breakpoints, $mq-key) {
  @include at-media($mq-key) {
    .#{$mq-key}\:#{$namespace-grid}container {
      $props: append-important($grid-global, desktop);
      @include grid-container($props);
    }

    // ...with custom widths
    @each $width-key, $width-value in $system-breakpoints {
      .#{$mq-key}\:#{$namespace-grid}container-#{$width-key} {
        $props: append-important($grid-global, $width-key);
        @include grid-container($props);
      }
    }
  }
}

}

// basic row… .#{$namespace-grid}row {

@include grid-row;

// ...that includes column gaps
&.#{$namespace-grid}gap {
  @include grid-gap-responsive;
}
@each $gap-key, $gap-val in map-deep-get($system-properties, gap, standard) {
  &.#{$namespace-grid}gap-#{$gap-key} {
    $props: append-important($grid-global, $gap-key);
    @include grid-gap($props);
  }
}

// responsive column gaps
@each $mq-key, $mq-value in $system-breakpoints {
  @if map-get($theme-utility-breakpoints, $mq-key) {
    @include at-media($mq-key) {
      @each $gap-key,
        $gap-val in map-deep-get($system-properties, gap, standard)
      {
        &.#{$mq-key}\:#{$namespace-grid}gap-#{$gap-key} {
          $props: append-important($grid-global, $gap-key);
          @include grid-gap($props);
        }
      }
    }
  }
}

}

// basic columns…

class*=“#{$namespace-grid}col”

{

@include u-position(relative);
@include u-width(full);
box-sizing: border-box;

}

.#{$namespace-grid}col {

$props: append-important($grid-global, fill);
@include grid-col($props);

}

.#{$namespace-grid}col-auto {

$props: append-important($grid-global, auto);
@include grid-col($props);

}

.#{$namespace-grid}col-fill {

$props: append-important($grid-global, fill);
@include grid-col($props);

}

// …with widths @each $width-key, $width-value in $system-layout-grid-widths {

.#{$namespace-grid}col-#{$width-key} {
  $props: append-important($grid-global, $width-key);
  @include grid-col($props);
}

}

// responsive columns @each $mq-key, $mq-value in $system-breakpoints {

@if map-get($theme-utility-breakpoints, $mq-key) {
  @include at-media($mq-key) {
    .#{$mq-key}\:#{$namespace-grid}col {
      $props: append-important($grid-global, fill);
      @include grid-col($props);
    }
    .#{$mq-key}\:#{$namespace-grid}col-fill {
      $props: append-important($grid-global, fill);
      @include grid-col($props);
    }
    .#{$mq-key}\:#{$namespace-grid}col-auto {
      $props: append-important($grid-global, auto);
      @include grid-col($props);
    }

    @each $width-key, $width-value in $system-layout-grid-widths {
      .#{$mq-key}\:#{$namespace-grid}col-#{$width-key} {
        $props: append-important($grid-global, $width-key);
        @include grid-col($props);
      }
    }
  }
}

}

// basic offsets @each $width-key, $width-value in $system-layout-grid-widths {

.#{$namespace-grid}offset-#{$width-key} {
  $props: append-important($grid-global, $width-key);
  @include grid-offset($props);
}

} .#{$namespace-grid}offset-none {

$props: append-important($grid-global, none);
@include grid-offset($props);

}

// responsive offsets @each $mq-key, $mq-value in $system-breakpoints {

@if map-get($theme-utility-breakpoints, $mq-key) {
  @each $width-key, $width-value in $system-layout-grid-widths {
    @include at-media($mq-key) {
      .#{$mq-key}\:#{$namespace-grid}offset-#{$width-key} {
        $props: append-important($grid-global, $width-key);
        @include grid-offset($props);
      }
    }
  }
  @include at-media($mq-key) {
    .#{$mq-key}\:#{$namespace-grid}offset-none {
      $props: append-important($grid-global, none);
      @include grid-offset($props);
    }
  }
}

} /* stylelint-enable */