// flex container
.flex-container-h {
  display: flex;
  flex-flow: row nowrap;

  &.baseline {
    align-items: baseline;
  }

  &.center {
    justify-content: center;
  }

  &.middle {
    align-items: center;
  }

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

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

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

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

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

  &.margin-between-sm {
    > * + * {
      margin-left: 4px;
    }
  }

  &.margin-between-md {
    > * + * {
      margin-left: 8px;
    }
  }

  &.margin-between-lg {
    > * + * {
      margin-left: 12px;
    }
  }
}

.flex-container-v {
  display: flex;
  flex-flow: column nowrap;

  &.center {
    align-items: center;
  }

  &.middle {
    justify-content: center;
  }

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

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

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

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

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

  &.margin-between-sm {
    > * + * {
      margin-top: 4px;
    }
  }

  &.margin-between-md {
    > * + * {
      margin-top: 8px;
    }
  }

  &.margin-between-lg {
    > * + * {
      margin-top: 12px;
    }
  }
}

// TODO(archana): Fix !important by removing the nowrap from the flex-container-h and v and testing to
// ensure nothing breaks.
.wrap {
  flex-wrap: wrap !important;
}

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

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

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

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

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

// Flex item
.flex-grow {
  flex: auto;
  /* Same as flex: 1 1 auto; */
}

.flex-nogrow {
  flex: 0 1 auto;
  /* Same as flex: initial, or omitting flex: */
}

.flex-none {
  flex: none;
  /* Same as flex: 0 0 auto */
}

.flex-container-h .flex-pull-right,
.flex-pull-right {
  margin-left: auto;
}

.flex-container-h .flex-pull-left,
.flex-pull-left {
  margin-right: auto;
}

.flex-fill {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}