/* All spacing between elements should use these values. */

/* Margin bottom */
/* By default, use bottom margin to vertically separate content */

.mb-xx-small {
  margin-bottom: var(--space--xx-small);
}

.mb-x-small {
  margin-bottom: var(--space--x-small);
}

.mb-small {
  margin-bottom: var(--space--small);
}

.mb-base {
  margin-bottom: var(--space--base);
}

.mb-medium {
  margin-bottom: var(--space--medium);
}

.mb-large {
  margin-bottom: var(--space--large);
}

.mb-x-large {
  margin-bottom: var(--space--x-large);
}

.mb-xx-large {
  margin-bottom: var(--space--xx-large);
}

/* Margin top */
/* Use to separate content vertically. If the element is always rendered,
   use bottom margin on the element before instead.   
*/

.mt-base {
  margin-top: var(--space--base);
}