@each $size
  in (smallest, smaller, small, normal, medium, large, larger, largest, huge)
{
  .padding-$(size) {
    padding: var(--spacing-$(size));
  }
  .margin-$(size) {
    margin: var(--spacing-$(size));
  }
}

/* top */
.padding-top-none {
  padding-top: 0;
}
.padding-top-auto {
  padding-top: auto;
}
.margin-top-none {
  margin-top: 0;
}
.margin-top-auto {
  margin-top: auto;
}

@each $size
  in (smallest, smaller, small, normal, medium, large, larger, largest, huge)
{
  .padding-top-$(size) {
    padding-top: var(--spacing-$(size));
  }
  .margin-top-$(size) {
    margin-top: var(--spacing-$(size));
  }
}

/* right */
.padding-right-none {
  padding-right: 0;
}
.padding-right-auto {
  padding-right: auto;
}
.margin-right-none {
  margin-right: 0;
}
.margin-right-auto {
  margin-right: auto;
}

@each $size
  in (smallest, smaller, small, normal, medium, large, larger, largest, huge)
{
  .padding-right-$(size) {
    padding-right: var(--spacing-$(size));
  }
  .margin-right-$(size) {
    margin-right: var(--spacing-$(size));
  }
}

/* bottom */
.padding-bottom-none {
  padding-bottom: 0;
}
.padding-bottom-auto {
  padding-bottom: auto;
}
.margin-bottom-none {
  margin-bottom: 0;
}
.margin-bottom-auto {
  margin-bottom: auto;
}

@each $size
  in (smallest, smaller, small, normal, medium, large, larger, largest, huge)
{
  .padding-bottom-$(size) {
    padding-bottom: var(--spacing-$(size));
  }
  .margin-bottom-$(size) {
    margin-bottom: var(--spacing-$(size));
  }
}

/* left */
.padding-left-none {
  padding-left: 0;
}
.padding-left-auto {
  padding-left: auto;
}
.margin-left-none {
  margin-left: 0;
}
.margin-left-auto {
  margin-left: auto;
}

@each $size
  in (smallest, smaller, small, normal, medium, large, larger, largest, huge)
{
  .padding-left-$(size) {
    padding-left: var(--spacing-$(size));
  }
  .margin-left-$(size) {
    margin-left: var(--spacing-$(size));
  }
}

@each $size
  in (smallest, smaller, small, normal, medium, large, larger, largest, huge)
{
  .padding-horizontal-$(size) {
    padding-left: var(--spacing-$(size));
    padding-right: var(--spacing-$(size));
  }
  .padding-vertical-$(size) {
    padding-top: var(--spacing-$(size));
    padding-bottom: var(--spacing-$(size));
  }
  .margin-horizontal-$(size) {
    margin-left: var(--spacing-$(size));
    margin-right: var(--spacing-$(size));
  }
  .margin-vertical-$(size) {
    margin-top: var(--spacing-$(size));
    margin-bottom: var(--spacing-$(size));
  }
}