@import 'constants';

.flex {
  display: flex;

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

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

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

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

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

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

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

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

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

  &.wrap {
    flex-wrap: wrap;
  }

  &.column {
    flex-direction: column;
  }

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

  @media (min-width: $two-columns-breakpoint) {
    &.row-lg {
      flex-direction: row;
    }
  }

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

  &.auto {
    flex: auto;
  }
}

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

.flex-no-grow {
  flex-grow: 0;
}

.flex-no-shrink {
  flex-shrink: 0;
}

.flex-gap-1 {
  gap: $default-spacer;
}

.flex-gap-2 {
  gap: 2 * $default-spacer;
}

.flex-1 {
  flex: 1;
}

.two-column-list {
  display: flex;
  flex-wrap: wrap;

  li {
    flex: 0 0 50%;
    box-sizing: border-box;
  }

  @media (max-width: 62em) {
    li {
      flex: 0 0 100%;
    }
  }
}

.no-flex-xs {
  @media (max-width: 48em) {
    display: initial;
  }
}
