.generate-gap(@num, @name, @i: 0) when (@i =< @num) {
  .@{name}-@{i} {
    @{name}: 1px * @i !important;
  }

  .generate-gap(@num, @name, (@i + 5));
}

.generate-gap-more-direction(@num, @name, @direction1, @direction2, @i: 0)
  when
  (@i =< @num) {
  .@{name}-@{i} {
    @{direction1}: 1px * @i !important;
    @{direction2}: 1px * @i !important;
  }

  .generate-gap-more-direction(@num, @name, @direction1, @direction2, (@i + 4));
}

@size: {
  0: 0;
  5: 5px;
  10: 10px;
  15: 15px;
  20: 20px;
  40: 40px;
};

each(@size, {
  .gm-gap-@{key} {
    display: inline-block !important;
    height: @value !important;
    width: @value !important;
  }

  .gm-padding-@{key} {
    padding: @value !important;
  }

  .gm-padding-top-@{key} {
    padding-top: @value !important;
  }

  .gm-padding-bottom-@{key} {
    padding-bottom: @value !important;
  }
  .gm-padding-left-@{key} {
    padding-left: @value !important;
  }

  .gm-padding-right-@{key} {
    padding-right: @value !important;
  }

  .gm-padding-lr-@{key} {
    padding-left: @value !important;
    padding-right: @value !important;
  }

  .gm-padding-tb-@{key} {
    padding-top: @value !important;
    padding-bottom: @value !important;
  }

  .gm-margin-@{key} {
    margin: @value !important;
  }

  .gm-margin-top-@{key} {
    margin-top: @value !important;
  }

  .gm-margin-bottom-@{key} {
    margin-bottom: @value !important;
  }
  .gm-margin-left-@{key} {
    margin-left: @value !important;
  }

  .gm-margin-right-@{key} {
    margin-right: @value !important;
  }

  .gm-margin-lr-@{key} {
    margin-left: @value !important;
    margin-right: @value !important;
  }

  .gm-margin-tb-@{key} {
    margin-top: @value !important;
    margin-bottom: @value !important;
  }
});