
/**
 * A flexbox helper mixin.
 *
 * @wrap : nowrap | wrap | wrap-reverse | 0
 * @direction: row | row-reverse | column | column-reverse | 0
 * @align-items : normal | <baseline-position> | <content-distribution> | <overflow-position> | 0
 * @justify: <content-distribution> | <overflow-position> | 0.
 * @align-content : normal | <baseline-position> | <content-distribution> | <overflow-position> | 0
 */

.flex-container(
  @wrap : 0,
  @direction : 0,
  @align-items : 0,
  @justify : 0,
  @align-content : 0
) {
  display: flex;

  & when(iskeyword(@wrap)) {
    flex-wrap: @wrap;
  }

  & when(iskeyword(@direction)) {
    flex-direction: @direction;
  }

  & when(iskeyword(@align-items)) {
    align-items: @align-items;
  }

  & when(iskeyword(@justify)) {
    justify-content: @justify;
  }

  & when(iskeyword(@align-content)) {
    align-content: @align-content;
  }
}

/**
 * Helper mixin to make a container centerning
 * it's content with flexbox.
 */

.flex-center(
  @wrap : wrap,
  @direction : column,
  @align-content : 0
) {
  .flex-container(
    @wrap,
    @direction,
    center,
    center,
    @align-content
  );
}

/**
 * Helper mixin to make a container basleining
 * it's content with flexbox.
 */

.flex-baseline(
  @wrap : 0,
  @direction : 0,
  @align-content : 0)
{
  .flex-container(
    @wrap,
    @direction,
    baseline,
    center,
    @align-content
  );
}

/* Reset flexbox content positionning */

.flex-normal(
  @wrap : 0,
  @direction : 0
) {
  .flex-container(
    @wrap,
    @direction,
    normal,
    normal,
    normal
  );
}


/* Flex Utilities - Quickly manage layout and alignement */

/*----------- Direction -----------*/

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

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

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

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

/*----------- Justify content -----------*/

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

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

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

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

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

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

/*----------- Align items -----------*/

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

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

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

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

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

/*----------- Align self -----------*/

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

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

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

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

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