/**
 * row
 */

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
}

.row-stretch {
  align-items: stretch;
  > * {
    display: flex;
    align-items: stretch;
    > * {
      min-height: 100%;
    }
  }
}

/**
 * @generate-row
 */

// row-space

.row-space-y(@size, @breakpoint: none) when (@breakpoint = none) {
  & when (isnumber(@size)) {
    margin-top: -@size;
    margin-bottom: -@size;
    > * {
      padding-top: @size;
      padding-bottom: @size;
    }
  }
  & when not (isnumber(@size)) {
    @arr: ~"row-space-@{size}";
    @vertical: extract(@@arr, 1);
    margin-top: -@vertical;
    margin-bottom: -@vertical;
    > * {
      padding-top: @vertical;
      padding-bottom: @vertical;
    }
  }
}

.row-space-y(@size, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  & when (isnumber(@size)) {
    @media @@query-min {
      margin-top: -@size;
      margin-bottom: -@size;
      > * {
        padding-top: @size;
        padding-bottom: @size;
      }
    }
  }
  & when not (isnumber(@size)) {
    @arr: ~"row-space-@{size}";
    @vertical: extract(@@arr, 1);
    @media @@query-min {
      margin-top: -@vertical;
      margin-bottom: -@vertical;
      > * {
        padding-top: @vertical;
        padding-bottom: @vertical;
      }
    }
  }
}

.row-space-x(@size, @breakpoint: none) when (@breakpoint = none) {
  & when (isnumber(@size)) {
    margin-left: -@size;
    margin-right: -@size;
    > * {
      padding-left: @size;
      padding-right: @size;
    }
  }
  & when not (isnumber(@size)) {
    @arr: ~"row-space-@{size}";
    @horizontal: extract(@@arr, 2);
    margin-left: -@horizontal;
    margin-right: -@horizontal;
    > * {
      padding-left: @horizontal;
      padding-right: @horizontal;
    }
  }
}

.row-space-x(@size, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  & when (isnumber(@size)) {
    @media @@query-min {
      margin-left: -@size;
      margin-right: -@size;
      > * {
        padding-left: @size;
        padding-right: @size;
      }
    }
  }
  & when not (isnumber(@size)) {
    @arr: ~"row-space-@{size}";
    @horizontal: extract(@@arr, 2);
    @media @@query-min {
      margin-left: -@horizontal;
      margin-right: -@horizontal;
      > * {
        padding-left: @horizontal;
        padding-right: @horizontal;
      }
    }
  }
}

.row-space(@size, @breakpoint: none) when (@breakpoint = none) {
  & when (isnumber(@size)) {
    margin: -@size -@size;
    > * {
      padding: @size @size;
    }
  }
  & when not (isnumber(@size)) {
    @arr: ~"row-space-@{size}";
    @vertical: extract(@@arr, 1);
    @horizontal: extract(@@arr, 2);
    margin: -@vertical -@horizontal;
    > * {
      padding: @vertical @horizontal;
    }
  }
}

.row-space(@size, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  & when (isnumber(@size)) {
    @media @@query-min {
      margin: -@size -@size;
      > * {
        padding: @size @size;
      }
    }
  }
  & when not (isnumber(@size)) {
    @arr: ~"row-space-@{size}";
    @vertical: extract(@@arr, 1);
    @horizontal: extract(@@arr, 2);
    @media @@query-min {
      margin: -@vertical -@horizontal;
      > * {
        padding: @vertical @horizontal;
      }
    }
  }
}

// generate

& when not (@generate-row = false) {

  // generate-row

  .generate-row();
  .generate-row(@breakpoint: none) {
    & when (@breakpoint = none) {
      // row-space
      .generate-row-space(@breakpoint);
    }
    & when not (@breakpoint = none) {
      @query-min: 'min-@{breakpoint}';
      @media @@query-min {
        // row-space
        .generate-row-space(@breakpoint);
      }
    }
  }

  // generate-row-responsive

  & when not (@generate-row = true) {

    .generate-row-responsive();
    .generate-row-responsive(@i: length(@generate-row)) when (@i > 0) {
      .generate-row-responsive(@i - 1);
      @breakpoint: extract(@generate-row, @i);
      .generate-row(@breakpoint);
    }

  }

  // generate-row-space

  .generate-row-space(@breakpoint: none, @i: length(@row-spaces)) when (@i > 0) {
    .generate-row-space(@breakpoint, @i - 1);
    @name: extract(@row-spaces, @i);
    & when (@breakpoint = none) {
      .row-space-y-@{name} {
        .row-space-y(@name) !important;
      }
      .row-space-x-@{name} {
        .row-space-x(@name) !important;
      }
      .row-space-@{name} {
        .row-space(@name) !important;
      }
    }
    & when not (@breakpoint = none) {
      .row-space-y-@{name}-@{breakpoint} {
        .row-space-y(@name) !important;
      }
      .row-space-x-@{name}-@{breakpoint} {
        .row-space-x(@name) !important;
      }
      .row-space-@{name}-@{breakpoint} {
        .row-space(@name) !important;
      }
    }
  }

}