@use "sass:map";
@use "../../00-base/01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * CSS grid
// *
// * More on Flexbox (used here for fallback):
//    https://css-tricks.com/snippets/css/complete-guide-grid/
//
////////////////////////////////////////////////////////////////////////////////

// * Flex-row mixins
// =============================================================================

// ** make a uniform grid (columns, mostly)
//
//    Variables:
//    - $columns: total columns of your grid system
//    - $gap-hor: gap between the columns
@mixin flex-grid($columns: var(--grid-columns), $gap-hor: var(--gap-hor)) {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  // overflow: hidden; // fix for non-collapsing margins
  min-height: rem(1);
  margin-inline: calc($gap-hor / -2);
}

// ** set width of individual grid cell
//
//    Variables:
//    - $number: number of columns your item is wide OR "auto" for autosizing
//    - $columns: total columns of your grid system
//    - $gap-hor: gap between the columns
@mixin flex-col($number, $columns: var(--grid-columns), $gap-hor: var(--gap-hor)) {
  position: relative;
  margin-inline: calc($gap-hor / 2);
  min-height: rem(1);

  @if ($number == "auto") {
    flex: 1 1 auto;
    flex-basis: auto;
    max-width: none;
  } @else {
    flex: 0 0 auto;
    flex-basis: calc((100% * #{$number} / #{$columns}) - $gap-hor);
  }
}

// ** pull using position relative
//
//    Variables:
//    - $size: number of columns to move
//    - $columns: total columns of your grid system
//    - $gap-hor: gap between the columns
@mixin flex-col-pull($number, $columns: var(--grid-columns)) {
  position: relative;
  left: calc(-100% * $number / $columns);
}

// ** push using margin relative
//
//    Variables:
//    - $size: number of columns to move
//    - $columns: total columns of your grid system
//    - $gap-hor: gap between the columns
@mixin flex-col-push($number, $columns: var(--grid-columns)) {
  position: relative;
  left: calc(100% * $number / $columns);
}

// ** create cells that span multiple rows: this is for the row wrapper
@mixin flex-rows($height, $columns: var(--grid-columns), $gap-hor: var(--gap-hor)) {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column; // very important !!!
  height: $height; // need a height in order to stretch over
  margin-inline: calc($gap-hor / -2);
}

// ** create cells that span multiple rows: this is for cells
//    don't forget to mess around with 'order' to get the order you need
@mixin flex-row($height, $rows: 2, $gap-hor: var(--gap-hor)) {
  flex: 0 0 calc(#{100% * math.div($height, $rows)} - $gap-hor);
}
