$gutter-breakpoints: (
  xs: 4px,
  sm: 8px,
) !default;

$grid-gutter-breakpoints: (
  xs: 3%,
  sm: 5%,
) !default;

// map functions
@function breakpoint($breakpoint) {
  @if map-has-key($grid-breakpoints, $breakpoint) {
    @return map-get($grid-breakpoints, $breakpoint);
  } @else {
    @warn 'breakpoint: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
  }
}

@function gutter($breakpoint) {
  @if map-has-key($gutter-breakpoints, $breakpoint) {
    @return map-get($gutter-breakpoints, $breakpoint);
  } @else {
    @warn 'gutter: could not find #{$breakpoint} in $gutter-breakpoints map. Please make sure it is defined';
  }
}

@function grid-gutter($breakpoint) {
  @if map-has-key($grid-gutter-breakpoints, $breakpoint) {
    @return map-get($grid-gutter-breakpoints, $breakpoint);
  } @else {
    @warn 'grid-gutter: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
  }
}

@mixin column-size($col-num) {
  flex: 0 0 (100% * $col-num / $grid-columns);
  max-width: (100% * $col-num / $grid-columns);
}

// .grid {
//   margin-left: grid-gutter('xs');
//   margin-right: grid-gutter('xs');
//   padding-left: gutter('xs');
//   padding-right: gutter('xs');

//   @media (min-width: breakpoint('sm')) {
//     margin-left: grid-gutter('sm');
//     margin-right: grid-gutter('sm');
//     padding-left: gutter('sm');
//     padding-right: gutter('sm');
//   }

//   @media (min-width: breakpoint('xxl')) {
//     margin: 0 auto;
//   }
// }

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 gutter('xs') * -1;

  @media (min-width: breakpoint('sm')) {
    margin: 0 gutter('sm') * -1;
  }

  &.no-gutters {
    margin-right: 0;
    margin-left: 0;
  }

  &.row-deck {
    [class*='col-'] {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
  }
}

[class*='col-'] {
  position: relative;
  width: 100%;
  padding: 0 gutter('xs');

  @media (min-width: breakpoint('sm')) {
    padding: 0 gutter('sm');
  }
}

.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

@for $i from 1 through $grid-columns {
  .col-xs-#{$i} {
    flex: 0 0 (100% * $i / $grid-columns);
    max-width: (100% * $i / $grid-columns);
  }

  .offset-xs-#{$i} {
    margin-left: (100% * $i / $grid-columns);
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @media (min-width: breakpoint($breakpoint)) {
    .col-#{$breakpoint}-auto {
      flex: 0 0 auto;
      width: auto;
    }

    @for $i from 1 through $grid-columns {
      .col-#{$breakpoint}-#{$i} {
        flex: 0 0 (100% * $i / $grid-columns);
        max-width: (100% * $i / $grid-columns);
      }

      .offset-#{$breakpoint}-#{$i} {
        margin-left: (100% * $i / $grid-columns);
      }
    }
  }
}

.col-xs,
.col-sm,
.col-md,
.col-lg,
.col-xl,
.col-xxl {
  flex-basis: 0;
  flex: 1;
  flex-grow: 1;
  max-width: 100%;
}