@use "sass:math";

$grid-gaps: (
  "xxs":   $space-1,
  "xs":    $space-2,
  "sm":    $space-3,
  "m":     $space-4,
  "base":  $space-5,
  "lg":    $space-7,
  "xl":    $space-8,
  "2xl":   $space-12,
  "3xl":   $space-14
);

.o-columns {
  display: flex;
  flex-wrap: wrap;
  margin-left: -#{math.div(map-get($grid-gaps, "base"), 2)};
  margin-right: -#{math.div(map-get($grid-gaps, "base"), 2)};
  row-gap: map-get($grid-gaps, "base");

  &.-auto > .o-column:not(.-grow) {
    flex: none;
  }

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

  &.-align-baseline {
    align-items: baseline;
  }

  &.-align-center {
    align-items: center;
  }

  &.-align-end {
    align-self: flex-end;
  }

  &.-justify-center {
    justify-content: center;
  }

  &.-justify-end {
    justify-content: flex-end;
  }

  @each $gapName, $gap in $grid-gaps {
    &.-gap-#{$gapName} {
      margin-left: -#{math.div($gap, 2)};
      margin-right: -#{math.div($gap, 2)};

      .o-column {
        padding-left: #{math.div($gap, 2)};
        padding-right: #{math.div($gap, 2)};
      }
    }
  }

  &.-gapless {
    row-gap: 0;
    margin-left: 0;
    margin-right: 0;

    .o-column {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.o-column {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding-left: #{math.div(map-get($grid-gaps, "base"), 2)};
  padding-right: #{math.div(map-get($grid-gaps, "base"), 2)};

  &.-grow {
    flex: 1;
  }

  &.-col-1-2 {
    flex-basis: 50%;
  }

  &.-col-1-3 {
    flex-basis: 33.33%;
  }

  &.-col-1-4 {
    flex-basis: 25%;
  }

  &.-col-2-3 {
    flex-basis: 66.66%;
  }
}