/**
 * Flexbox utilities
 *
 * These utilities can be used manipulate the itpGrid
 *
 * Flexbox playground: https://codepen.io/enxaneta/full/adLPwv
 */

/**
 * Apply flex behaviour
 */

.u-Flex {
  display: flex;
}

@media (--bp1) {
  .u-Flex--bp1 {
    display: flex;
  }
}

@media (--bp2) {
  .u-Flex--bp2 {
    display: flex;
  }
}

@media (--bp3) {
  .u-Flex--bp3 {
    display: flex;
  }
}

@media (--bp4) {
  .u-Flex--bp4 {
    display: flex;
  }
}

@media (--bp5) {
  .u-Flex--bp5 {
    display: flex;
  }
}

/**
 * Wrapping
 */

.u-FlexWrap {
  flex-wrap: wrap;
}

.u-FlexNoWrap {
  flex-wrap: nowrap;
}

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

/**
 * Directions
 */

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

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

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

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

/**
 * Align items vertically
 */

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

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

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

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

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

/**
 * Align a single items vertically
 */

.u-FlexAlignSelfStart {
  align-self: start;
}

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

.u-FlexAlignSelfEnd {
  align-self: end;
}

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

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

/**
 * Align items horizontally
 */

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

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

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

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

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