/* Parent container options */
.flex {
  --gap: 1rem;

  display: flex;
}

.flex--column { display: flex; flex-direction: column; }
.flex--space-items { display: flex; justify-content: space-between; }
.flex--wrap { flex-wrap: wrap; }
.flex--nowrap { flex-wrap: nowrap; }
.flex--centered { justify-content: center; }
.flex--align-center { display: flex; align-items: center; }
.flex--align-bottom { align-items: flex-end; }
.flex--align-end { justify-content: end; }
.flex--gap { column-gap: var(--column-gap, var(--gap)); row-gap: var(--row-gap, var(--gap)); }

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

.flex--divided-rows > .flex--divided-row:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

/* Child flex item options */
.flex-item--grow { flex-grow: 1; }
.flex-item--no-shrink { flex-shrink: 0; }
.flex-item--fill { flex: 1; }
.flex-item--align-center { align-self: center; }
.flex-item--align-start { align-self: start; }
.flex-item--align-end { align-self: end; }

/* Flex based on media query size */
.flex\@medium { @media (min-width: 40em) { display: flex; } }
.flex--centered\@medium { @media (min-width: 40em) { justify-content: center; } }
.flex--align-center\@medium { @media (min-width: 40em) { display: flex; align-items: center;}; }
.flex--space-items\@medium { @media (min-width: 40em) { display: flex; justify-content: space-between; } }
.flex--align-center\@medium { @media (min-width: 40em) { display: flex; align-items: center; } }
.flex--align-bottom\@medium { @media (min-width: 40em) { display: flex; align-items: flex-end; } }
.flex--column\@tiny { @media (max-width: 20em) { flex-direction: column; } }
.flex--column\@small { @media (max-width: 39.95em) { flex-direction: column; } }