:root {
  --grid-gutter: 25px;
  --grid-gutter-small: 10px;
  --spacing-small: 5px;
  --spacing-medium: 10px;
  --spacing-extra-medium: 16px;
  --spacing-large: 25px;
}

.root {
  box-sizing: border-box;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.horizontal {
  white-space: nowrap;
  max-width: 100%;
}

.multiline {
  white-space: normal;
}

.vertical {

}

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -var(--grid-gutter);
  justify-content: flex-start;
}

.wrap {
  flex-wrap: wrap;
  white-space: normal;
}

.horizontal-flex,
.horizontal-fit {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.horizontal-fit {
  min-width: 100%;
  max-width: 100%;
  justify-content: center;
}

.horizontal-fit .item {
  flex: 5 1 100%;
}

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

.item {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
}

.item-grid {
  display: block;
  flex: 1;
  padding: var(--grid-gutter) 0 0 var(--grid-gutter);
}

.item-grid.item-spaced-small {
  padding: var(--grid-gutter-small) 0 0 var(--grid-gutter);
}

.item-horizontal {
  display: inline-block;
}

.item-horizontal.item-spaced-small,
.item-horizontal-fit.item-spaced-small,
.item-horizontal-flex.item-spaced-small{
  padding-right: var(--spacing-small);
}
.item-horizontal.item-spaced-medium,
.item-horizontal-fit.item-spaced-medium,
.item-horizontal-flex.item-spaced-medium {
  padding-right: var(--spacing-medium);
}
.item-horizontal.item-spaced-medium-right,
.item-horizontal-fit.item-spaced-medium-right,
.item-horizontal-flex.item-spaced-medium-right {
  padding-left: var(--spacing-medium);
}
.item-horizontal.item-spaced-extra-medium,
.item-horizontal-fit.item-spaced-extra-medium,
.item-horizontal-flex.item-spaced-extra-medium {
  padding-right: var(--spacing-extra-medium);
}
.item-horizontal.item-spaced-large,
.item-horizontal-fit.item-spaced-large,
.item-horizontal-flex.item-spaced-large {
  padding-right: var(--spacing-large);
}

.item-horizontal.item-spaced-small:last-child,
.item-horizontal.item-spaced-medium:last-child,
.item-horizontal.item-spaced-large:last-child,
.item-horizontal-fit.item-spaced-small:last-child,
.item-horizontal-fit.item-spaced-medium:last-child,
.item-horizontal-fit.item-spaced-large:last-child,
.item-horizontal-flex.item-spaced-small:last-child,
.item-horizontal-flex.item-spaced-medium:last-child,
.item-horizontal-flex.item-spaced-large:last-child {
  padding-right: 0;
}

.item-vertical {

}

.item-horizontal-fit {

}

.item-horizontal-flex {
  display: flex;
  flex: 0 0 auto;
}

.item-horizontal-multiline.item-multiline-spaced-small {
  padding-bottom: var(--spacing-small);
}

.item-horizontal-multiline.item-multiline-spaced-medium,
.item-horizontal-multiline.item-multiline-spaced-medium-right {
  padding-bottom: var(--spacing-medium);
}

.item-horizontal-multiline.item-multiline-spaced-large {
  padding-bottom: var(--spacing-large);
}

.item-horizontal-multiline.item-multiline-spaced-small:last-child,
.item-horizontal-multiline.item-multiline-spaced-medium:last-child,
.item-horizontal-multiline.item-multiline-spaced-large:last-child {
  padding-bottom: 0;
}

.item-vertical-flex {
  flex: 1 0;
}

.item-vertical.item-spaced-small,
.item-vertical-flex.item-spaced-small {
  padding-bottom: var(--spacing-small);
}
.item-vertical.item-spaced-medium,
.item-vertical-flex.item-spaced-medium {
  padding-bottom: var(--spacing-medium);
}
.item-vertical.item-spaced-extra-medium,
.item-vertical-flex.item-spaced-extra-medium {
  padding-bottom: var(--spacing-extra-medium);
}
.item-vertical.item-spaced-large,
.item-vertical-flex.item-spaced-large {
  padding-bottom: var(--spacing-large);
}

.item-vertical.item-spaced-small:last-child,
.item-vertical.item-spaced-medium:last-child,
.item-vertical.item-spaced-extra-medium:last-child,
.item-vertical.item-spaced-large:last-child,
.item-vertical-flex.item-spaced-small:last-child,
.item-vertical-flex.item-spaced-medium:last-child,
.item-vertical-flex.item-spaced-extra-medium:last-child,
.item-vertical-flex.item-spaced-large:last-child {
  padding-bottom: 0;
}

.justify-flex-start {
  justify-content: flex-start;
}

.justify-flex-end {
  justify-content: flex-end;
  text-align: right; /* TODO: this is kind of broken; */
}

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

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

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