@import '../variables/default.scss';
@import '../mixins/index.scss';

.ink-row {
  @include display-flex;

  width: 100%;

  &__direction {
    &--row {
      flex-direction: row;
    }

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

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

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

  &__align {
    &--start {
      @include align-items(flex-start);
    }

    &--end {
      @include align-items(flex-end);
    }

    &--center {
      @include align-items(center);
    }

    &--stretch {
      @include align-items(stretch);
    }

    &--baseline {
      @include align-items(baseline);
    }
  }

  &__justify {
    &--start {
      @include justify-content(flex-start);
    }

    &--end {
      @include justify-content(flex-end);
    }

    &--center {
      @include justify-content(center);
    }

    &--between {
      @include justify-content(space-between);
    }

    &--around {
      @include justify-content(space-around);
    }
  }

  &__align-content {
    &--start {
      @include align-content(flex-start);
    }

    &--end {
      @include align-content(flex-end);
    }

    &--center {
      @include align-content(center);
    }

    &--between {
      @include align-content(space-between);
    }

    &--around {
      @include align-content(space-around);
    }

    &--stretch {
      @include align-content(stretch);
    }
  }

  &--no-wrap {
    @include flex-wrap(nowrap);
  }

  &--wrap {
    @include flex-wrap(wrap);
  }

  &--wrap-reverse {
    @include flex-wrap(wrap-reverse);
  }
}