/**
 * list
 */

// .list

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

.list-block {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
}

// selectors

.list-btns(@rules) {
  &, > * {
    > a:not(.btn), > button:not(.btn) {
      @rules();
    }
  }
}

/**
 * @generate-list
 */

// list-space

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

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

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

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

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

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

// generate

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

  // generate-list

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

  // generate-list-responsive

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

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

  }

  // generate-list-space

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

}