@use 'sass:map';
@use '../../config' as CONFIG;

$COLUMNS: map.get(CONFIG.$GRID_INTERNAL, 'columns');
// * column-padding should be half the desired gutter width & only adds left and right padding to the columns
$COLUMN-PADDING: map.get(CONFIG.$GRID_INTERNAL, 'gutters');

@mixin responsive {
  &-auto-width {
    flex: 0 0 auto;
    @content;
  }
  @for $i from 1 through $COLUMNS {
    $percentage: (($i / $COLUMNS) * 100) * 1%;
    &-#{$i} {
      flex: 0 0 auto;
      width: #{$percentage};
    }
    &-offset-#{$i} {
      margin-left: #{$percentage};
    }
  }
}

.u-row {
  display: flex;
  box-sizing: border-box;
  margin-left: -$COLUMN-PADDING;
  margin-right: -$COLUMN-PADDING;
  &__column {
    display: block;
    flex: 1 1 0;
    padding: 0 $COLUMN-PADDING;
    box-sizing: border-box; // ! NOTE: All should be border box
    &.m {
      @each $key, $value in CONFIG.$BREAKPOINTS_INTERNAL {
        &--#{$key} {
          @if ($key == 'mobile') {
            @include responsive {
              width: auto;
            }
          } @else {
            @media screen and (min-width: $value), print {
              @include responsive;
            }
          }
        }
      }
    }
    @media screen and (max-width: 774px), print {
      flex: 0 0 auto;
      width: 100%;
    }
  }
  &.m {
    &--no-gutters {
      margin-left: 0;
      margin-right: 0;
      > .u-row__column {
        padding: 0;
      }
    }
    &--wrap {
      flex-wrap: wrap;
    }
  }
  @media screen and (max-width: 774px), print {
    flex-wrap: wrap;
  }
}