// ===============================================================
// Padding
// .padding-top, .padding-top-2x, ... , .padding-top-8x, padding-top-s
// .padding-bottom, .padding-bottom-2x, ... , .padding-bottom-8x, padding-bottom-s
// .padding-left, .padding-left-2x, ... , .padding-left-8x, padding-left-s
// .padding-right, .padding-right-2x, ... , .padding-right-8x, padding-right-s
// .no-padding, .no-padding-horizontal, .no-padding-vertical
// ================================================
// .padding-top-8x { padding-top: 64px; }
// .padding-top-s { padding-top: 4px; }
// ===============================================================
@for $i from 0 through 8 {
  $suffix: '';
  $mag: $i;

  @if ($i == 0) {
    $suffix: '-s';
    $mag: 0.5;
  }

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

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

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

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

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

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

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

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

.padding-s {
  padding: 4px;
}

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

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

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

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

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

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

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