@mixin grid-gap-responsive {
  $gap-mobile: if(
    map-has-key($system-column-gaps, $theme-column-gap-mobile),
    map-get($system-column-gaps, $theme-column-gap-mobile),
    "error"
  );
  $gap-desktop: if(
    map-has-key($system-column-gaps, $theme-column-gap-desktop),
    map-get($system-column-gaps, $theme-column-gap-desktop),
    "error"
  );

  @if $gap-mobile == "error" {
    @error '$theme-column-gap-mobile is not set to a valid column gap width.';
  }

  @if $gap-desktop == "error" {
    @error '$theme-column-gap-desktop is not set to a valid column gap width.';
  }

  @include u-margin-x(
    unquote("#{$neg-prefix}-#{calc-gap-offset($gap-mobile)}")
  );

  > * {
    @include this-border-box-sizing;
    @include u-padding-x(calc-gap-offset($gap-mobile));
  }

  @include at-media("desktop") {
    @include u-margin-x(
      unquote("#{$neg-prefix}-#{calc-gap-offset($gap-desktop)}")
    );

    > * {
      @include this-border-box-sizing;
      @include u-padding-x(calc-gap-offset($gap-desktop));
    }
  }
}

@mixin grid-gap($props...) {
  $props: unpack($props);
  @if length($props) == 0 {
    @include grid-gap-responsive;
  } @else {
    $gap: smart-quote(nth($props, 1));
    @if $gap == 0 {
      @include u-margin-x(append-important($props, 0));

      > * {
        @include this-border-box-sizing;
        @include u-padding-x(append-important($props, 0));
      }
    } @else {
      @if map-has-key($project-column-gaps, $gap) {
        $gap: map-get($project-column-gaps, $gap);
      } @else if map-has-key($system-column-gaps, $gap) {
        $gap: map-get($system-column-gaps, $gap);
      }
      @include u-margin-x(
        append-important(
          $props,
          unquote("#{$neg-prefix}-#{calc-gap-offset($gap)}")
        )
      );
      > * {
        @include this-border-box-sizing;
        @include u-padding-x(append-important($props, calc-gap-offset($gap)));
      }
    }
  }
}

@mixin grid-col($props...) {
  $props: unpack($props);
  @include this-border-box-sizing;

  @if length($props) == 0 {
    @include u-flex(fill);
    @include u-width(auto);
  } @else {
    $col: smart-quote(nth($props, 1));
    @if $col == "auto" {
      $flex: append-important($props, auto);
      $width: append-important($props, auto);
      $maxw: append-important($props, full);
      @include u-flex($flex);
      @include u-width($width);
      @include u-maxw($maxw);
    } @else if $col == "fill" {
      $flex: append-important($props, fill);
      $width: append-important($props, auto);
      $maxw: append-important($props, full);
      @include u-flex($flex);
      @include u-width($width);
      @include u-maxw($maxw);
      min-width: 1px; // IE 11
    } @else if not map-has-key($system-layout-grid-widths, $col) {
      @error '#{$col} is not a valid layout grid width. Valid width are #{map-keys($system-layout-grid-widths)}';
    } @else {
      $flex: append-important($props, auto);
      $width: append-important(
        $props,
        map-get($system-layout-grid-widths, $col)
      );
      @include u-flex($flex);
      @include u-width(override, $width);
    }
  }
}

@mixin grid-offset($props...) {
  $props: unpack($props);
  $offset: smart-quote(nth($props, 1));
  @if $offset == "none" {
    $width: append-important($props, 0);
    @include u-margin-left(override, $width);
  } @else if not map-has-key($system-layout-grid-widths, $offset) {
    @error '#{$offset} is not a valid layout grid width. Valid width are #{map-keys($system-layout-grid-widths)}';
  } @else {
    $width: append-important(
      $props,
      map-get($system-layout-grid-widths, $offset)
    );
    @include u-margin-left(override, $width);
  }
}