// Row
.c-row {
  @include grid-row();

  // Remove the default negative margins to collapse
  &-collapsed {
    margin-right: $space-0;
    margin-left: $space-0;

    // Remove from children to reset
    > .c-col,
    > [class*="c-col-"] {
      padding-right: $space-0;
      padding-left: $space-0;
    }
  }

  // Change flex for vertical row
  &-vertical {
    flex-direction: column;

    > .c-col {
      flex-basis: auto;
    }
  }
}

@each $breakpoint in map-keys($breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $bp: breakpoint-infix($breakpoint, $breakpoints);

    .c-row#{$bp}-flex-col {
      flex-direction: column;
    }

    .c-row#{$bp}-flex-reverse {
      flex-direction: row-reverse;
    }

    .c-row#{$bp}-flex-col-reverse {
      flex-direction: column-reverse;
    }

    .c-row#{$bp}-wrap {
      flex-wrap: wrap;
    }

    .c-row#{$bp}-nowrap {
      flex-wrap: nowrap;
    }

    .c-row#{$bp}-wrap-reverse {
      flex-wrap: wrap-reverse;
    }

    .c-row#{$bp}-justify-start {
      justify-content: flex-start;
    }

    .c-row#{$bp}-justify-end {
      justify-content: flex-end;
    }

    .c-row#{$bp}-justify-center {
      justify-content: center;
    }

    .c-row#{$bp}-justify-space-between {
      justify-content: space-between;
    }

    .c-row#{$bp}-justify-space-around {
      justify-content: space-around;
    }

    .c-row#{$bp}-align-start {
      align-items: flex-start;
    }

    .c-row#{$bp}-align-end {
      align-items: flex-end;
    }

    .c-row#{$bp}-align-center {
      align-items: center;
    }

    .c-row#{$bp}-align-baseline {
      align-items: baseline;
    }

    .c-row#{$bp}-align-stretch {
      align-items: stretch;
    }

    .c-row-content#{$bp}-unstretch {
      align-items: baseline;
    }

    .c-row-align-content#{$bp}-start {
      align-content: flex-start;
    }

    .c-row-align-content#{$bp}-end {
      align-content: flex-end;
    }

    .c-row-align-content#{$bp}-center {
      align-content: center;
    }

    .c-row-align-content#{$bp}-between {
      align-content: space-between;
    }

    .c-row-align-content#{$bp}-around {
      align-content: space-around;
    }

    .c-row-align-content#{$bp}-stretch {
      align-content: stretch;
    }
  }
}