/*
 * flex-semantic.css
 *
 * Small semantic vocabulary for programmatic HTML generation.
 *
 * Naming convention:
 *
 *   flex-*     -> flex container properties
 *   growN      -> flex-grow
 *   shrinkN    -> flex-shrink
 *   self-*     -> align-self
 *   orderN     -> order
 *   gapN       -> gap
 *
 * The vocabulary intentionally covers common layouts rather than
 * exposing every possible CSS value.
 */


/* ================================================================
   FLEX CONTAINER
   ================================================================ */

.flex {
  display: flex;
}


/* Direction */

.row {
  flex-direction: row;
}

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

.row-reverse {
  flex-direction: row-reverse;
}

.col-reverse, .column-reverse {
  flex-direction: column-reverse;
}


/* ================================================================
   MAIN AXIS
   justify-content
   ================================================================ */

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

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

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

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

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

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


/* ================================================================
   CROSS AXIS
   align-items
   ================================================================ */

.align-start {
  align-items: flex-start;
}

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

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

.align-stretch {
  align-items: stretch;
}

.align-baseline {
  align-items: baseline;
}


/* ================================================================
   MULTI-LINE FLEX CONTAINERS
   align-content
   ================================================================ */

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

.content-end {
  align-content: flex-end;
}

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

.content-stretch {
  align-content: stretch;
}

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

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

.content-evenly {
  align-content: space-evenly;
}


/* ================================================================
   WRAPPING
   ================================================================ */

.nowrap {
  flex-wrap: nowrap;
}

.wrap {
  flex-wrap: wrap;
}

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


/* ================================================================
   INDIVIDUAL FLEX ITEM
   align-self
   ================================================================ */

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}


/* ================================================================
   FLEX GROW
   ================================================================ */

.grow0 {
  flex-grow: 0;
}

.grow1 {
  flex-grow: 1;
}

.grow2 {
  flex-grow: 2;
}

.grow3 {
  flex-grow: 3;
}

.grow4 {
  flex-grow: 4;
}

.grow5 {
  flex-grow: 5;
}

.grow6 {
  flex-grow: 6;
}


/* ================================================================
   FLEX SHRINK
   ================================================================ */

.shrink0 {
  flex-shrink: 0;
}

.shrink1 {
  flex-shrink: 1;
}

.shrink2 {
  flex-shrink: 2;
}

.shrink3 {
  flex-shrink: 3;
}

.shrink4 {
  flex-shrink: 4;
}

.shrink5 {
  flex-shrink: 5;
}

.shrink6 {
  flex-shrink: 6;
}


/* ================================================================
   FLEX BASIS
   ================================================================ */

.basis-auto {
  flex-basis: auto;
}

.basis0 {
  flex-basis: 0;
}

.basis25 {
  flex-basis: 25%;
}

.basis50 {
  flex-basis: 50%;
}

.basis75 {
  flex-basis: 75%;
}

.basis100 {
  flex-basis: 100%;
}


/* ================================================================
   ORDER
   ================================================================ */

.order0 {
  order: 0;
}

.order1 {
  order: 1;
}

.order2 {
  order: 2;
}

.order3 {
  order: 3;
}

.order4 {
  order: 4;
}

.order5 {
  order: 5;
}

.order6 {
  order: 6;
}


/* ================================================================
   GAP
   ================================================================ */

.gap0 {
  gap: 0;
}

.gap1 {
  gap: 0.25rem;
}

.gap2 {
  gap: 0.5rem;
}

.gap3 {
  gap: 0.75rem;
}

.gap4 {
  gap: 1rem;
}

.gap5 {
  gap: 1.5rem;
}

.gap6 {
  gap: 2rem;
}