@mixin create-mq($breakpoint) {
  @if ($breakpoint == 0) {
    @content;
  } @else {
    @media screen and (min-width: map-get($breakpoint, "min")) and (max-width: map-get($breakpoint, "max")) {
      @content;
    }
  }
}

@mixin create-col-classes($modifier, $grid-cols) {
  .col#{$modifier} {
    flex-basis: 0;
    flex-grow: 1;
  }
  @for $i from 1 through $grid-cols {
    .col#{$modifier}-#{$i} {
      flex-basis: (100 / ($grid-cols / $i) ) * 1%;
      flex-grow: 0;
    }
    .col-offset#{$modifier}-#{$i} {
      margin-left: (100 / ($grid-cols / $i) ) * 1%;
    }
  }
}

@mixin make-row() {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

@mixin create-alignment-classes($modifier) {
  .flex-first#{$modifier} {
    order: -1;
  }
  .flex-last#{$modifier} {
    order: 1;
  }
  .flex-end#{$modifier} {
    display: flex;
    justify-content: flex-end;
  }
  .flex-start#{$modifier} {
    display: flex;
    justify-content: flex-start;
  }
  .flex-center#{$modifier} {
    display: flex;
    justify-content: center;
  }
  .flex-between#{$modifier} {
    display: flex;
    justify-content: space-between;
  }
  .flex-around#{$modifier} {
    display: flex;
    justify-content: space-around;
  }
  .flex-top#{$modifier} {
    align-items: flex-start;
  }
  .flex-middle#{$modifier} {
    align-items: center;
  }
  .flex-bottom#{$modifier} {
    align-items: flex-end;
  }
  .flex-self-center#{$modifier} {
    align-self: center;
  }
  .flex-self-start#{$modifier} {
    align-self: flex-start;
  }
  .flex-self-end#{$modifier} {
    align-self: flex-end;
  }
}