// ===============================================================
// Margin
// .margin-top, .margin-top-2x, ... , .margin-top-6x
// .margin-bottom, .margin-bottom-2x, ... , .margin-bottom-6x
// .margin-left, .margin-left-2x, ... , .margin-left-6x
// .margin-right, .margin-right-2x, ... , .margin-right-6x
// .no-margin, .no-margin-horizontal, no-margin-vertical
// .margin-auto, .margin-horizontal-auto, .margin-vertical-auto
// ===============================================================
@for $i from 1 through 6 {
  $suffix: '';

  @if ($i > 1) {
    $suffix: '-' + $i + 'x';
  }

  .margin#{$suffix} {
    @include margin($i);
  }

  .margin-top#{$suffix} {
    @include margin-top($i);
  }

  .margin-bottom#{$suffix} {
    @include margin-bottom($i);
  }

  .margin-left#{$suffix} {
    @include margin-left($i);
  }

  .margin-right#{$suffix} {
    @include margin-right($i);
  }

  .margin-horizontal#{$suffix} {
    @include margin-horizontal($i);
  }

  .margin-vertical#{$suffix} {
    @include margin-vertical($i);
  }
}

.margin-s {
  margin: 4px;
}

.margin-left-s {
  margin-left: 4px;
}

.margin-right-s {
  margin-right: 4px;
}

.margin-top-s {
  margin-top: 4px;
}

.margin-bottom-s {
  margin-bottom: 4px;
}

.no-margin {
  @include no-margin();
}

.no-margin-horizontal {
  @include no-margin-horizontal();
}

.no-margin-vertical {
  @include no-margin-vertical();
}

.margin-auto {
  @include margin-auto();
}

.margin-horizontal-auto {
  @include margin-horizontal-auto();
}

.margin-vertical-auto {
  @include margin-vertical-auto();
}