$padding:
  zero     0rem,
  xx-small 0.25rem,
  x-small  0.5rem,
  small    0.75rem,
  medium   1rem,
  x-medium 1.25rem,
  large    1.5rem,
  x-large  1.75rem;

@each $size in $padding {
  .padding-#{nth($size, 1)} {
    padding: nth($size, 2) nth($size, 2) * 2;
  }

  .padding-vertical-#{nth($size, 1)} {
    padding-top: nth($size, 2);
    padding-bottom: nth($size, 2);
  }

  .padding-horizontal-#{nth($size, 1)} {
    padding-left: nth($size, 2);
    padding-right: nth($size, 2);
  }

  .margin-#{nth($size, 1)} {
    margin: nth($size, 2) nth($size, 2) * 2;
  }

  .margin-vertical-#{nth($size, 1)} {
    margin-top: nth($size, 2);
    margin-bottom: nth($size, 2);
  }

  .margin-horizontal-#{nth($size, 1)} {
    margin-left: nth($size, 2);
    margin-right: nth($size, 2);
  }

  //Important Everything
  .padding-#{nth($size, 1)}-important {
    padding: nth($size, 2) nth($size, 2) * 2 !important;
  }

  .padding-vertical-#{nth($size, 1)}-important {
    padding-top: nth($size, 2) !important;
    padding-bottom: nth($size, 2) !important;
  }

  .padding-horizontal-#{nth($size, 1)}-important {
    padding-left: nth($size, 2) !important;
    padding-right: nth($size, 2) !important;
  }

  .margin-#{nth($size, 1)}-important {
    margin: nth($size, 2) nth($size, 2) * 2 !important;
  }

  .margin-vertical-#{nth($size, 1)}-important {
    margin-top: nth($size, 2) !important;
    margin-bottom: nth($size, 2) !important;
  }

  .margin-horizontal-#{nth($size, 1)}-important {
    margin-left: nth($size, 2) !important;
    margin-right: nth($size, 2) !important;
  }
}

.no-margin-or-padding {
  margin: 0 !important;
  padding: 0 !important;
}

.margin-auto {
  margin-left: auto;
  margin-right: auto;
}