:root, body {
  --space-unit:  1em;
  --space-xxxxs: calc(0.125 * var(--space-unit));
  --space-xxxs:  calc(0.25 * var(--space-unit));
  --space-xxs:   calc(0.375 * var(--space-unit));
  --space-xs:    calc(0.5 * var(--space-unit));
  --space-sm:    calc(0.75 * var(--space-unit));
  --space-md:    calc(1.25 * var(--space-unit));
  --space-lg:    calc(2 * var(--space-unit));
  --space-xl:    calc(3.25 * var(--space-unit));
  --space-xxl:   calc(5.25 * var(--space-unit));
  --space-xxxl:  calc(8.5 * var(--space-unit));
  --space-xxxxl: calc(13.75 * var(--space-unit));
}

// alignment utility classes - based on Flexbox
// TODO: layout
.flex, flex--inline {
  > * {
    display: inline-block; // fallback
  }
}

.flex {
  display: flex;
}

.flex-inline {
  display: inline-flex;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--column {
  flex-direction: column;
}

.flex--end-x {
  justify-content: flex-end;
}

.flex--end-y {
  align-items: flex-end;
}

.flex--center {
  justify-content: center;
  align-items: center;
}

.flex--center-x {
  justify-content: center;
}

.flex--center-y {
  align-items: center;
}

.flex--space-between {
  justify-content: space-between;
}

.flex--space-around {
  justify-content: space-around;
}

.flex--space-evenly {
  justify-content: space-evenly;
}

.flex--grow > * {
  flex-grow: 1;
}

.flex--shrink-none > * {
  flex-shrink: 0;
}

// set margin for children
.flex-gap, .flex-gap--md {
  margin-left: calc(-1 * var(--space-md) / 2);
  margin-right: calc(-1 * var(--space-md) / 2);

  > * {
    padding-left: calc(var(--space-md) / 2);
    padding-right: calc(var(--space-md) / 2);
  }
}

.flex--wrap.flex-gap, .flex--wrap.flex-gap--md {
  margin-bottom: calc(-1 * var(--space-md));

  > * {
    margin-bottom: var(--space-md);
  }
}

.flex-gap--xxs {
  margin-left: calc(-1 * var(--space-xxs) / 2);
  margin-right: calc(-1 * var(--space-xxs) / 2);

  > * {
    padding-left: calc(var(--space-xxs) / 2);
    padding-right: calc(var(--space-xxs) / 2);
  }
}

.flex--wrap.flex-gap--xxs {
  margin-bottom: calc(-1 * var(--space-xxs));

  > * {
    margin-bottom: var(--space-xxs);
  }
}

.flex-gap--xs {
  margin-left: calc(-1 * var(--space-xs) / 2);
  margin-right: calc(-1 * var(--space-xs) / 2);

  > * {
    padding-left: calc(var(--space-xs) / 2);
    padding-right: calc(var(--space-xs) / 2);
  }
}

.flex--wrap.flex-gap--xs {
  margin-bottom: calc(-1 * var(--space-xs));

  > * {
    margin-bottom: var(--space-xs);
  }
}

.flex-gap--sm {
  margin-left: calc(-1 * var(--space-sm) / 2);
  margin-right: calc(-1 * var(--space-sm) / 2);

  > * {
    padding-left: calc(var(--space-sm) / 2);
    padding-right: calc(var(--space-sm) / 2);
  }
}

.flex--wrap.flex-gap--sm {
  margin-bottom: calc(-1 * var(--space-sm));

  > * {
    margin-bottom: var(--space-sm);
  }
}

.flex-gap--lg {
  margin-left: calc(-1 * var(--space-lg) / 2);
  margin-right: calc(-1 * var(--space-lg) / 2);

  > * {
    padding-left: calc(var(--space-lg) / 2);
    padding-right: calc(var(--space-lg) / 2);
  }
}

.flex--wrap.flex-gap--lg {
  margin-bottom: calc(-1 * var(--space-lg));

  > * {
    margin-bottom: var(--space-lg);
  }
}

.flex-gap--xl {
  margin-left: calc(-1 * var(--space-xl) / 2);
  margin-right: calc(-1 * var(--space-xl) / 2);

  > * {
    padding-left: calc(var(--space-xl) / 2);
    padding-right: calc(var(--space-xl) / 2);
  }
}

.flex--wrap.flex-gap--xl {
  margin-bottom: calc(-1 * var(--space-xl));

  > * {
    margin-bottom: var(--space-xl);
  }
}

// children
.flex-item--end {
  align-self: flex-end;
}

.flex-item--grow {
  flex-grow: 1;
}

.flex-item--shrink-none {
  flex-shrink: 0;
}