@use "../mixins";
@use "../variables";

// Flex

.flex {
  display: flex !important;

  &-inline {
    display: inline-flex !important;
  }

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

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

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

@each $key, $val in variables.$flex-align {
  .flex--align-#{$key} {
    align-items: #{$val};
  }
}

@each $key, $val in variables.$flex-align {
  .flex--align-self-#{$key} {
    align-self: #{$val};
  }
}

@each $key, $val in variables.$flex-direction {
  .flex--#{$key} {
    flex-direction: #{$val};
  }
}

@each $key, $val in variables.$flex-justify {
  .flex--justify-#{$key} {
    justify-content: #{$val} !important;
  }
}

// horizontaly and vertically center content
.flex--center-content {
  @extend %flex-center;
}