/** --------------------------------------------------- **/
/** ///////////////////// SPACING ///////////////////// **/
/** --------------------------------------------------- **/

/** //// STANDARD SPACING VALUES //// **/

:root {
    --spacing__0:0px;
    --spacing__1:1px;
    --spacing__2:2px;
    --spacing__4:4px;
    --spacing__8:8px;
    --spacing__12:12px;
    --spacing__16:16px;
    --spacing__20:20px;
    --spacing__24:24px;
    --spacing__32:32px;
    --spacing__40:40px;
    --spacing__56:56px;
    --spacing__72:72px;
    --spacing__80:80px;
}

/** ------------------------------------------------------- **/
/** /////////////////////// CLASSES /////////////////////// **/
/** ------------------------------------------------------- **/

/** //// STACK SPACING //// **/
/* For spacing between vertically stacked elements. */

.stack-xxl {
  gap: var(--stack__XXL);
}
.stack-xl {
  gap: var(--stack__XL);
}
.stack-lg {
  gap: var(--stack__L);
}
.stack-md {
  gap: var(--stack__M);
}
.stack-sm {
  gap: var(--stack__S);
}
.stack-xs {
  gap: var(--stack__XS);
}
.stack-xxs {
  gap: var(--stack__XXS);
}

/** //// INLINE SPACING //// **/
/* For the spacing of elements that are displayed inline horizontally. */

.inline-xxl {
  gap: var(--inline__XXL);
}
.inline-xl {
  gap: var(--inline__XL);
}
.inline-lg {
  gap: var(--inline__L);
}
.inline-md {
  gap: var(--inline__M);
}
.inline-sm {
  gap: var(--inline__S);
}
.inline-xs {
  gap: var(--inline__XS);
}
.inline-none {
  gap: var(--inline__XXL);
}

/** //// INSET SPACING - ALL SIDES EQUAL //// **/
/* For when the spacing inside a container is the same on all sides. */

.inset-xxl {
  padding: var(--inset__XXL);
}
.inset-xl {
  padding: var(--inset__XL);
}
.inset-lg {
  padding: var(--inset__L);
}
.inset-md {
  padding: var(--inset__M);
}
.inset-sm {
  padding: var(--inset__S);
}
.inset-xs {
  padding: var(--inset__XS);
}
.inset-xxs {
  padding: var(--inset__XXS);
}
.inset-xxxs {
  padding: var(--inset__XXXS);
}
.inset-none {
  padding: var(--inset__none);
}

/** //// INSET SPACING - LEFT and RIGHT SIDES ONLY //// **/
/* For when the left and right side spacing inside a container needs to be different from what is on the top and bottom. */

.inset-sides-xxl {
  padding-left: var(--inset__XXL);
  padding-right: var(--inset__XXL);
}
.inset-sides-xl {
  padding-left: var(--inset__XL);
  padding-right: var(--inset__XL);
}
.inset-sides-lg {
  padding-left: var(--inset__L);
  padding-right: var(--inset__L);
}
.inset-sides-md {
  padding-left: var(--inset__M);
  padding-right: var(--inset__M);
}
.inset-sides-sm {
  padding-left: var(--inset__S);
  padding-right: var(--inset__S);
}
.inset-sides-xs {
  padding-left: var(--inset__XS);
  padding-right: var(--inset__XS);
}
.inset-sides-xxs {
  padding-left: var(--inset__XXS);
  padding-right: var(--inset__XXS);
}
.inset-sides-xxxs {
  padding-left: var(--inset__XXXS);
  padding-right: var(--inset__XXXS);
}
.inset-sides-none {
  padding-left: var(--inset__none);
  padding-right: var(--inset__none);
}

/** //// INSET SPACING - TOP and BOTTOM ONLY //// **/
/* For when the top and bottom spacing inside a container needs to be different from what is on the left and right sides. */

.inset-topbot-xxl {
  padding-top: var(--inset__XXL);
  padding-bottom: var(--inset__XXL);
}
.inset-topbot-xl {
  padding-top: var(--inset__XL);
  padding-bottom: var(--inset__XL);
}
.inset-topbot-lg {
  padding-top: var(--inset__L);
  padding-bottom: var(--inset__L);
}
.inset-topbot-md {
  padding-top: var(--inset__M);
  padding-bottom: var(--inset__M);
}
.inset-topbot-sm {
  padding-top: var(--inset__S);
  padding-bottom: var(--inset__S);
}
.inset-topbot-xs {
  padding-top: var(--inset__XS);
  padding-bottom: var(--inset__XS);
}
.inset-topbot-xxs {
  padding-top: var(--inset__XXS);
  padding-bottom: var(--inset__XXS);
}
.inset-topbot-xxxs {
  padding-top: var(--inset__XXXS);
  padding-bottom: var(--inset__XXXS);
}
.inset-topbot-none {
  padding-top: var(--inset__none);
  padding-bottom: var(--inset__none);
}

/** ------------------------------------------------------------- **/
/** /////////////////////// MEDIA QUERIES /////////////////////// **/
/** ------------------------------------------------------------- **/
 
/* Handled in the tokens.css file */