.margin-auto {
  margin: auto;
}

.margin-xs {
  margin: var(--margin-xs);
}
.margin-sm {
  margin: var(--margin-sm);
}
.margin-md {
  margin: var(--margin-md);
}
.margin-lg {
  margin: var(--margin-lg);
}
.margin-xl {
  margin: var(--margin-xl);
}

.margin-top-xs {
  margin-top: var(--margin-xs);
}
.margin-top-sm {
  margin-top: var(--margin-sm);
}
.margin-top-md {
  margin-top: var(--margin-md);
}
.margin-top-lg {
  margin-top: var(--margin-lg);
}
.margin-top-xl {
  margin-top: var(--margin-xl);
}

.margin-bottom-xs {
  margin-bottom: var(--margin-xs);
}
.margin-bottom-sm {
  margin-bottom: var(--margin-sm);
}
.margin-bottom-md {
  margin-bottom: var(--margin-md);
}
.margin-bottom-lg {
  margin-bottom: var(--margin-lg);
}
.margin-bottom-xl {
  margin-bottom: var(--margin-xl);
}

.margin-left-xs {
  margin-left: var(--margin-xs);
}
.margin-left-sm {
  margin-left: var(--margin-sm);
}
.margin-left-md {
  margin-left: var(--margin-md);
}
.margin-left-lg {
  margin-left: var(--margin-lg);
}
.margin-left-xl {
  margin-left: var(--margin-xl);
}

.margin-right-xs {
  margin-right: var(--margin-xs);
}
.margin-right-sm {
  margin-right: var(--margin-sm);
}
.margin-right-md {
  margin-right: var(--margin-md);
}
.margin-right-lg {
  margin-right: var(--margin-lg);
}
.margin-right-xl {
  margin-right: var(--margin-xl);
}

.margin-x-xs {
  margin-left: var(--margin-xs);
  margin-right: var(--margin-xs);
}
.margin-x-sm {
  margin-left: var(--margin-sm);
  margin-right: var(--margin-sm);
}
.margin-x-md {
  margin-left: var(--margin-md);
  margin-right: var(--margin-md);
}
.margin-x-lg {
  margin-left: var(--margin-lg);
  margin-right: var(--margin-lg);
}
.margin-x-xl {
  margin-left: var(--margin-xl);
  margin-right: var(--margin-xl);
}

.margin-y-xs {
  margin-top: var(--margin-xs);
  margin-bottom: var(--margin-xs);
}
.margin-y-sm {
  margin-top: var(--margin-sm);
  margin-bottom: var(--margin-sm);
}
.margin-y-md {
  margin-top: var(--margin-md);
  margin-bottom: var(--margin-md);
}
.margin-y-lg {
  margin-top: var(--margin-lg);
  margin-bottom: var(--margin-lg);
}
.margin-y-xl {
  margin-top: var(--margin-xl);
  margin-bottom: var(--margin-xl);
}

/* Should be after all margins so it takes priority in css hierarchy */
.margin-0 {
  margin: 0;
}
.margin-top-0 {
  margin-top: 0;
}
.margin-bottom-0 {
  margin-bottom: 0;
}
.margin-left-0 {
  margin-left: 0;
}
.margin-right-0 {
  margin-right: 0;
}

.padding-xs {
  padding: var(--padding-xs);
}
.padding-sm {
  padding: var(--padding-sm);
}
.padding-md {
  padding: var(--padding-md);
}
.padding-lg {
  padding: var(--padding-lg);
}
.padding-xl {
  padding: var(--padding-xl);
}
.padding-xxl {
  padding: var(--padding-xxl);
}

.padding-top-xs {
  padding-top: var(--padding-xs);
}
.padding-top-sm {
  padding-top: var(--padding-sm);
}
.padding-top-md {
  padding-top: var(--padding-md);
}
.padding-top-lg {
  padding-top: var(--padding-lg);
}
.padding-top-xl {
  padding-top: var(--padding-xl);
}
.padding-top-xxl {
  padding-top: var(--padding-xxl);
}

.padding-bottom-xs {
  padding-bottom: var(--padding-xs);
}
.padding-bottom-sm {
  padding-bottom: var(--padding-sm);
}
.padding-bottom-md {
  padding-bottom: var(--padding-md);
}
.padding-bottom-lg {
  padding-bottom: var(--padding-lg);
}
.padding-bottom-xl {
  padding-bottom: var(--padding-xl);
}
.padding-bottom-xxl {
  padding-bottom: var(--padding-xxl);
}

.padding-left-xs {
  padding-left: var(--padding-xs);
}
.padding-left-sm {
  padding-left: var(--padding-sm);
}
.padding-left-md {
  padding-left: var(--padding-md);
}
.padding-left-lg {
  padding-left: var(--padding-lg);
}
.padding-left-xl {
  padding-left: var(--padding-xl);
}
.padding-left-xxl {
  padding-left: var(--padding-xxl);
}

.padding-right-xs {
  padding-right: var(--padding-xs);
}
.padding-right-sm {
  padding-right: var(--padding-sm);
}
.padding-right-md {
  padding-right: var(--padding-md);
}
.padding-right-lg {
  padding-right: var(--padding-lg);
}
.padding-right-xl {
  padding-right: var(--padding-xl);
}
.padding-right-xxl {
  padding-right: var(--padding-xxl);
}

.padding-x-xs {
  padding-left: var(--padding-xs);
  padding-right: var(--padding-xs);
}
.padding-x-sm {
  padding-left: var(--padding-sm);
  padding-right: var(--padding-sm);
}
.padding-x-md {
  padding-left: var(--padding-md);
  padding-right: var(--padding-md);
}
.padding-x-lg {
  padding-left: var(--padding-lg);
  padding-right: var(--padding-lg);
}
.padding-x-xl {
  padding-left: var(--padding-xl);
  padding-right: var(--padding-xl);
}
.padding-x-xxl {
  padding-left: var(--padding-xxl);
  padding-right: var(--padding-xxl);
}

.padding-y-xs {
  padding-top: var(--padding-xs);
  padding-bottom: var(--padding-xs);
}
.padding-y-sm {
  padding-top: var(--padding-sm);
  padding-bottom: var(--padding-sm);
}
.padding-y-md {
  padding-top: var(--padding-md);
  padding-bottom: var(--padding-md);
}
.padding-y-lg {
  padding-top: var(--padding-lg);
  padding-bottom: var(--padding-lg);
}
.padding-y-xl {
  padding-top: var(--padding-xl);
  padding-bottom: var(--padding-xl);
}
.padding-y-xxl {
  padding-top: var(--padding-xxl);
  padding-bottom: var(--padding-xxl);
}

/* Should be after all paddings so it takes priority in css hierarchy */
.padding-0 {
  padding: 0;
}
.padding-top-0 {
  padding-top: 0;
}
.padding-bottom-0 {
  padding-bottom: 0;
}
.padding-left-0 {
  padding-left: 0;
}
.padding-right-0 {
  padding-right: 0;
}

.spaced-content {
  > * {
    &:not(:last-child) {
      margin-right: var(--margin-xs);
    }
  }
}

.spaced-content-sm {
  > * {
    &:not(:last-child) {
      margin-right: var(--margin-sm);
    }
  }
}

.spaced-content-lg {
  > * {
    &:not(:last-child) {
      margin-right: var(--margin-lg);
    }
  }
}

.spaced-content-xl {
  > * {
    &:not(:last-child) {
      margin-right: var(--margin-xl);
    }
  }
}

.spaced-content-xxl {
  > * {
    &:not(:last-child) {
      margin-right: var(--margin-xxl);
    }
  }
}

.spaced-content-v-xs {
  > * {
    &:not(:last-child) {
      margin-bottom: var(--margin-xs);
    }
  }
}

.spaced-content-v-sm {
  > * {
    &:not(:last-child) {
      margin-bottom: var(--margin-sm);
    }
  }
}

.spaced-content-v {
  > * {
    &:not(:last-child) {
      margin-bottom: var(--margin-md);
    }
  }
}

.spaced-content-v-lg {
  > * {
    &:not(:last-child) {
      margin-bottom: var(--margin-lg);
    }
  }
}

.spaced-content-v-xl {
  > * {
    &:not(:last-child) {
      margin-bottom: var(--margin-xl);
    }
  }
}

.spaced-content-v-xxl {
  > * {
    &:not(:last-child) {
      margin-bottom: var(--margin-xxl);
    }
  }
}

.flex-gap-sm {
  gap: var(--margin-sm);
}