@use "sass:math";
@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-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);
  }
}

.at-col {
  @include flex(1);

  width: 100%;

  /*  #ifndef  rn  */
  //  display: block;
  //  white-space: nowrap;
  // box-sizing: border-box;
  /*  #endif  */
  @for $col from 1 through 12 {
    $width: math.div($col, 12) * 100%;

    &-#{$col} {
      // @include flex(0, 0, $width);
      flex-basis: $width;
      max-width: $width;
    }

    &__offset-#{$col} {
      margin-left: $width;
    }
  }

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

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

    &--center {
      @include align-self(center);
    }
  }
  /*  #ifndef  rn  */
  // &--auto {
  //   max-width: initial;
  //   //  word-break: keep-all;
  // }

  // &--wrap {
  //   //  white-space: normal;
  //   word-wrap: break-word;
  // }
  /*  #endif  */
}