.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);
}