@use "sass:math";


//=============================================
//=            Gid mixins            =
//=============================================

$cols: 12 !default;

// Get width by cols

@function getWidthByCols($c) {
  @if($c == 0) {
    @return 0%;
  }
  @return math.div($c * 100, $cols) * 1%;
}


// Get width by cols and total

@function getWidthByColsAndTotal($c, $total) {
  @if($c == 0) {
    @return 0%;
  }
  @return math.div($c * 100, $total) * 1%;
}



// Set flex width

@mixin setFlexWidth($width) {
  max-width: $width;
  min-width: $width;
}


// Build grid

@mixin buildGrid($prefix) {
  $i: $cols;
  @while $i > -1 {
    &[data-#{$prefix}="#{$i}"] {
      flex-grow: initial;
      @include setFlexWidth(getWidthByCols($i));
      $j: $cols;
      @while $j >= -1 {
        @if($i <= $j) {
          &[data-#{$prefix}total="#{$j}"],
          &[data-#{$prefix}t="#{$j}"] {
            @include setFlexWidth(getWidthByColsAndTotal($i, $j));
          }
        }
        $j : $j - 1; 
      }
    }
  
    &[data-#{$prefix}offset="#{$i}"],
    &[data-#{$prefix}o="#{$i}"] {
      flex-grow: initial;
      margin-left: getWidthByCols($i);
      $j: $cols;
      @while $j >= -1 {
        @if($i <= $j) {
          &[data-#{$prefix}total="#{$j}"],
          &[data-#{$prefix}t="#{$j}"] {
            margin-left: getWidthByColsAndTotal($i, $j);
          }
        }
        $j : $j - 1; 
      }
      
    }
    $i : $i - 1; 
  }
}

@mixin setWrapperFluid {
  .wrapper-fluid {  
    display: block;
    padding-left: var(--safe-area);
    padding-right: var(--safe-area);
    max-width: 100%;
  
    &, * {
      box-sizing: border-box;
    }
  }
}

@mixin setWrapperCentered {
  .wrapper-centered {
    display: block;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    max-width: var(--wrapper-centered);
  
    &, * {
      box-sizing: border-box;
    }
  }
}

@mixin setWrappers {
  @include setWrapperFluid();
  @include setWrapperCentered();
}


// =====  End of Gid mixins  ======