// Layout
//
// Layout classes can be used to make unique layouts. Uses Flexbox.
//
//
// Styleguide Layouts
//

/* Flexbox
// ================================================== */

// Display
//
// Classes to append display properties
//
// Styleguide Layouts.Display
//

// Flex
//
// Markup:
//    <div class="flex">Display Flex</div>
//
// Styleguide Layouts.Display.Flex
//
.flex {
  display: flex;
}

// Block
//
// Markup:
//    <div class="block">Display Block</div>
//
// Styleguide Layouts.Display.Block
//
.inline-flex {
  display: block;
}

// None
//
// Will not render
//
// Markup:
//    <div class="none">Display None</div>
//
// Styleguide Layouts.Display.None
//
.none {
  display: none;
}

// Display Inline Flex
//
// Markup:
//    <div class="inline-flex">Display Inline Flex</div>
//
// Styleguide Layouts.Display.Inline Flex
//
.inline-flex {
  display: inline-flex;
}

/* Flex direction */
.layout-row {
  display: flex;
  flex-direction: row;
}

/* Default */
.layout-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

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

.layout-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}


/* Flex wrap */
.nowrap {
  flex-wrap: nowrap;
}

/* Default */
.wrap {
  flex-wrap: wrap;
}

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


/* Justify content */
.justify-content-end {
  justify-content: flex-end;
}

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

/* Default */
.justify-content-center {
  justify-content: center;
}

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

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

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


/* Align items */
.align-items-start {
  align-items: flex-start;
}

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

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

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

/* Default */
.align-items-baseline {
  align-items: baseline;
}

.fill-height {
  min-height: 100vh;
}


/* Flex grow */
.flex-grow-none {
  flex-grow: 0;
}

/* Default */
.flex-grow {
  flex-grow: 1;
}


/* Flex shrink */
.flex-shrink-none {
  flex-shrink: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

/* Default */


/* Flex basis */
.flex-basis-auto {
  flex-basis: auto;
}

/* Default */
.flex-basis-none {
  flex-basis: 0;
}


/* Align self */
.align-self-auto {
  align-self: auto;
}

/* Default */
.align-self-start {
  align-self: flex-start;
}

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

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

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

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