/*  UTILITIES: SPACING
//////////////////////////////////////////////////////////////////////////////*/

/*  PADDING //////////////////////////////////////////////////////////////////*/

.no-padding {
    padding: 0;
}

.padding-xs {
    padding: var(--spacing-xs);
}
.padding-s {
    padding: var(--spacing-s) !important;
}
.padding-m {
    padding: var(--spacing-m) !important;
}
.padding-l {
    padding: var(--spacing-l);
}
.padding-xl {
    padding: var(--spacing-mxl);
}

.padding-top-xs {
    padding-top: var(--spacing-xs);
}
.padding-top-s {
    padding-top: var(--spacing-s);
}
.padding-top-m {
    padding-top: var(--spacing-m);
}
.padding-top-l {
    padding-top: var(--spacing-l);
}
.padding-top-xl {
    padding-top: var(--spacing-mxl);
}

.padding-right-xs {
    padding-right: var(--spacing-xs);
}
.padding-right-s {
    padding-right: var(--spacing-s);
}
.padding-right-m {
    padding-right: var(--spacing-m);
}
.padding-right-l {
    padding-right: var(--spacing-l);
}
.padding-right-xl {
    padding-right: var(--spacing-mxl);
}

.padding-bottom-xs {
    padding-bottom: var(--spacing-xs);
}
.padding-bottom-s {
    padding-bottom: var(--spacing-s);
}
.padding-bottom-m {
    padding-bottom: var(--spacing-m);
}
.padding-bottom-l {
    padding-top: var(--spacing-l);
}
.padding-bottom-xl {
    padding-top: var(--spacing-mxl);
}

.padding-left-xs {
    padding-left: var(--spacing-xs);
}
.padding-left-s {
    padding-left: var(--spacing-s);
}
.padding-left-m {
    padding-left: var(--spacing-m);
}
.padding-left-l {
    padding-left: var(--spacing-l);
}
.padding-left-xl {
    padding-left: var(--spacing-mxl);
}

.padding-block-xs {
    padding-block: var(--spacing-xs);
}
.padding-block-s {
    padding-block: var(--spacing-s);
}
.padding-block-m {
    padding-block: var(--spacing-m);
}
.padding-block-l {
    padding-block: var(--spacing-l);
}
.padding-block-xl {
    padding-block: var(--spacing-xl);
}

.padding-inline-xs {
    padding-inline: var(--spacing-xs);
}
.padding-inline-s {
    padding-inline: var(--spacing-s);
}
.padding-inline-m {
    padding-inline: var(--spacing-m);
}
.padding-inline-l {
    padding-inline: var(--spacing-l);
}
.padding-inline-xl {
    padding-inline: var(--spacing-xl);
}

/*  MARGIN ///////////////////////////////////////////////////////////////////*/

.no-margin {
    margin: 0;
}
.margin-top-xs {
    margin-top: var(--spacing-xs);
}
.margin-top-s {
    margin-top: var(--spacing-s);
}
.margin-top-m {
    margin-top: var(--spacing-m);
}
.margin-top-l {
    margin-top: var(--spacing-l);
}
.margin-top-xl {
    margin-top: var(--spacing-xl);
}

.margin-right-xs {
    margin-right: var(--spacing-xs);
}
.margin-right-s {
    margin-right: var(--spacing-s);
}
.margin-right-m {
    margin-top: var(--spacing-m);
}
.margin-right-l {
    margin-right: var(--spacing-l);
}
.margin-right-xl {
    margin-top: var(--spacing-xl);
}

.margin-bottom-0 {
    margin-bottom: 0 !important;
}
.margin-bottom-xs {
    margin-bottom: var(--spacing-xs);
}
.margin-bottom-s {
    margin-bottom: var(--spacing-s);
}
.margin-bottom-m {
    margin-bottom: var(--spacing-m);
}
.margin-bottom-l {
    margin-bottom: var(--spacing-l);
}
.margin-bottom-xl {
    margin-bottom: var(--spacing-xl);
}

.margin-left-xs {
    margin-left: var(--spacing-xs);
}
.margin-left-s {
    margin-left: var(--spacing-s);
}
.margin-left-m {
    margin-left: var(--spacing-m);
}
.margin-left-l {
    margin-left: var(--spacing-l);
}
.margin-left-xl {
    margin-left: var(--spacing-xl);
}

/*  GAPS /////////////////////////////////////////////////////////////////////*/

.no-gap {
    gap: 0;
}

.gap-xs {
    gap: var(--spacing-xs);
}
.gap-s {
    gap: var(--spacing-s);
}
.gap-m {
    gap: var(--spacing-m);
}
.gap-l {
    gap: var(--spacing-l);
}
.gap-xl {
    gap: var(--spacing-xl);
}

.row-gap-xs {
    row-gap: var(--spacing-xs);
}
.row-gap-s {
    row-gap: var(--spacing-s);
}
.row-gap-m {
    row-gap: var(--spacing-m);
}
.row-gap-l {
    row-gap: var(--spacing-l);
}
.row-gap-xl {
    row-gap: var(--spacing-xl);
}

.column-gap-xs {
    column-gap: var(--spacing-xs);
}
.column-gap-s {
    column-gap: var(--spacing-s);
}
.column-gap-m {
    column-gap: var(--spacing-m);
}
.column-gap-l {
    column-gap: var(--spacing-l);
}
.column-gap-xl {
    column-gap: var(--spacing-xl);
}

/*  GRID/FLEX ////////////////////////////////////////////////////////////////*/

.margin-top-auto {
    margin-block-start: auto !important;
    margin-top: auto !important;
}
.margin-right-auto {
    margin-inline-end: auto;
    margin-right: auto;
}
.margin-bottom-auto {
    margin-block-end: auto;
    margin-bottom: auto;
}
.margin-left-auto {
    margin-inline-start: auto;
    margin-left: auto;
}