@import "aloha_prefix";
@import "breakpoint";
@import "mixins";
@import "funktions";

$a_column_gaps: (
  0: 0rem,
  1: 0.25rem,
  2: 0.5rem,
  3: 0.75rem,
  4: 1rem,
  5: 1.25rem,
  6: 1.5rem,
  7: 1.75rem,
  8: 2rem,
) !default;

$a_column_count: 12;

.#{$aloha-prefix}columns {
  --#{$aloha-prefix}column_gap_x: 0.75rem;
  --#{$aloha-prefix}column_gap_y: 0.75rem;
  display: flex;
  margin-left: calc(-1 * var(--#{$aloha-prefix}column_gap_x));
  margin-right: calc(-1 * var(--#{$aloha-prefix}column_gap_x));
  > .#{$aloha-prefix}column {
    padding-left: var(--#{$aloha-prefix}column_gap_x);
    padding-right: var(--#{$aloha-prefix}column_gap_x);
  }
}
.#{$aloha-prefix}column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: var(--#{$aloha-prefix}column_gap_y) var(--#{$aloha-prefix}column_gap_x);
}


$a_breakpoints_grid: prepend($a_breakpoints, (class: null));

@each $breakpoint in $a_breakpoints_grid {
  $breakpoint-class: map-get($breakpoint, "class");
  $breakpoint-min: map-get($breakpoint, "min");
  $breakpoint-max: map-get($breakpoint, "max");

  @for $i from 1 through $a_column_count {
    @include media-width-all($breakpoint-min, $breakpoint-max) {
      .#{$aloha-prefix}columns_count_#{$i}#{ getBreakpointWithPrefix($breakpoint-class) } {
        --#{$aloha-prefix}column_count: #{$i};
        flex-wrap: wrap;
      }
    }
  }

  @each $gap-key, $gap-value in $a_column_gaps {
    @include media-width-all($breakpoint-min, $breakpoint-max) {
      .#{$aloha-prefix}columns_gap_x_#{$gap-key}#{ getBreakpointWithPrefix($breakpoint-class) },
      .#{$aloha-prefix}columns_gab_x_#{$gap-key}#{ getBreakpointWithPrefix($breakpoint-class) } { // Will be removed in version 2.0.0
        --#{$aloha-prefix}column_gap_x: #{$gap-value};
      }
      .#{$aloha-prefix}columns_gap_y_#{$gap-key}#{ getBreakpointWithPrefix($breakpoint-class) },
      .#{$aloha-prefix}columns_gab_y_#{$gap-key}#{ getBreakpointWithPrefix($breakpoint-class) } { // Will be removed in version 2.0.0
        --#{$aloha-prefix}column_gap_y: #{$gap-value};
      }
    }
  }

  @for $i from 1 through $a_column_count {
    @include media-width-all($breakpoint-min, $breakpoint-max) {
      .#{$aloha-prefix}column_#{$i}#{ getBreakpointWithPrefix($breakpoint-class) } {
        flex: none;
        width: calc(100% / var(--#{$aloha-prefix}column_count) * #{$i});
      }
    }
  }
  @for $i from 0 through $a_column_count - 1 {
    @include media-width-all($breakpoint-min, $breakpoint-max) {
      .#{$aloha-prefix}column_offset_#{$i}#{ getBreakpointWithPrefix($breakpoint-class) } {
        @if $i == 0 {
          margin-left: 0;
        } @else {
          margin-left: calc(100% / var(--#{$aloha-prefix}column_count) * #{$i});
        }
      }
    }
  }
}