// Layout Gutter
@layout-gutter: 8px;

@xs:    @layout-gutter / 2;
@sm:    @layout-gutter;
@md:    @layout-gutter * 2;
@lg:    @layout-gutter * 3;

@layout32: 32px;
@layout36: 36px;
@layout48: 48px;
@layout184: 184px;
@layout200: 200px;
@layout52: 52px;

// spaceing
@spacings:
  0  0,
  xs @xs,
  sm @sm,
  md @md,
  lg @lg;

@mp-list: margin m, padding p;

.for-each(@adList, @adCode) {
  /* stylelint-disable-next-line no-duplicate-selectors */
  & {
    .loop(@adI:1) when (@adI =< length(@adList)) {
      @adIndex: @adI - 1;
      @adItem: extract(@adList, @adI);
      @adKey: extract(@adItem, 1);
      @adValue: extract(@adItem, 2);

      @adCode();

      .loop(@adI + 1);
    }
    .loop();
  }
}

.loop-mp(@infix, @adKey, @adValue, @i: 1) when (@i =< length(@mp-list)) {
  @item: extract(@mp-list, @i);
  @abbrev: extract(@item, 2);
  @prop: extract(@item, 1);

  .@{abbrev}@{infix} {
    @{prop}: @adValue !important;
  }

  .@{abbrev}t@{infix} {
    @{prop}-top: @adValue !important;
  }

  .@{abbrev}r@{infix} {
    @{prop}-right: @adValue !important;
  }

  .@{abbrev}b@{infix} {
    @{prop}-bottom: @adValue !important;
  }

  .@{abbrev}l@{infix} {
    @{prop}-left: @adValue !important;
  }

  .@{abbrev}x@{infix} {
    @{prop}-right: @adValue !important;
    @{prop}-left: @adValue !important;
  }

  .@{abbrev}y@{infix} {
    @{prop}-top: @adValue !important;
    @{prop}-bottom: @adValue !important;
  }

  .loop-mp(@infix, @adKey, @adValue, @i + 1);
}

.for-each(@spacings, {
  .infix-mixin(@adKey) when(@adKey = 0) {
    @infix: 0;
  }
  .infix-mixin(@adKey) when(default()) {
    @infix: ~'-@{adKey}';
  }
  .infix-mixin(@adKey);

  .loop-mp(@infix, @adKey, @adValue, 1);

});