@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-center {
    justify-content: center;
  }

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

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

  &.wrap {
    flex-wrap: wrap;
  }

  &.column {
    flex-direction: column;
  }

  &.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;
}