// Flex box

.bz-flex {
  display: flex;

  //Basics
  &--centered {
    justify-content: center;
  }

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

  &--spaced {
    justify-content: space-between;
  }

  // Direction
  &--direction {
    &-row {
      flex-direction: row
    }

    &-row-reverse {
      flex-direction: row-reverse
    }

    &-column {
      flex-direction: column
    }

    &-column-reverse {
      flex-direction: column-reverse
    }
  }

  // Wrap
  &--wrap {
    &-nowrap {
      flex-wrap: nowrap;
    }

    &-wrap {
      flex-wrap: wrap;
    }

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

  // Justify Content
  &--justify-content {
    &-flex-start {
      justify-content: flex-start
    }

    &-flex-end {
      justify-content: flex-end
    }

    &-center {
      justify-content: center
    }

    &-space-between {
      justify-content: space-between
    }

    &-space-around {
      justify-content: space-around
    }

    &-start {
      justify-content: start
    }

    &-end {
      justify-content: end
    }

    &-left {
      justify-content: left
    }

    &-right {
      justify-content: right
    }
  }

}