@use "sass:math";

@use "../../utilities";
@use "../../variables/media-query-breakpoints";

@use "grid.variables" as css-grid-variables;

@mixin full-width-row($gutter: 0) {
  margin-inline-start: calc(50% - 50vw);
  margin-inline-end: calc(50% - 50vw);

  @if ($gutter > 0) {
    padding-inline-start: calc(50vw - 50% - #{math.ceil($gutter * 0.5)});
    padding-inline-end: calc(50vw - 50% - #{math.floor($gutter * 0.5)});
  } @else {
    padding-inline-start: calc(50vw - 50%);
    padding-inline-end: calc(50vw - 50%);
  }
}

@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
  @for $i from (1 + 1) through css-grid-variables.$grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }

  #{$list} {
    position: relative;
    min-block-size: 1px; // Prevent columns from collapsing when empty
    padding-inline-end: math.floor(css-grid-variables.$grid-gutter-width * 0.5);
    padding-inline-start: math.ceil(css-grid-variables.$grid-gutter-width * 0.5);
    float: inline-start;
    inline-size: 100%;
  }
}

@mixin calc-grid-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .col-#{$class}-#{$index} {
      inline-size: math.percentage(math.div($index, css-grid-variables.$grid-columns));
    }
  }

  @if ($type == push) and ($index > 0) {
    .col-#{$class}-push-#{$index} {
      inset-inline-start: math.percentage(math.div($index, css-grid-variables.$grid-columns));
    }
  }

  @if ($type == push) and ($index == 0) {
    .col-#{$class}-push-0 {
      inset-inline-start: auto;
    }
  }

  @if ($type == pull) and ($index > 0) {
    .col-#{$class}-pull-#{$index} {
      inset-inline-end: math.percentage(math.div($index, css-grid-variables.$grid-columns));
    }
  }

  @if ($type == pull) and ($index == 0) {
    .col-#{$class}-pull-0 {
      inset-inline-end: auto;
    }
  }

  @if ($type == offset) {
    .col-#{$class}-offset-#{$index} {
      margin-inline-start: math.percentage(math.div($index, css-grid-variables.$grid-columns));
    }
  }
}

@mixin loop-grid-columns($columns, $class, $type) {
  @for $i from 0 through $columns {
    @include calc-grid-column($i, $class, $type);
  }
}

@mixin make-grid($class) {
  @include loop-grid-columns(css-grid-variables.$grid-columns, $class, width);
  @include loop-grid-columns(css-grid-variables.$grid-columns, $class, pull);
  @include loop-grid-columns(css-grid-variables.$grid-columns, $class, push);
  @include loop-grid-columns(css-grid-variables.$grid-columns, $class, offset);
}

@mixin container-fixed($gutter: css-grid-variables.$grid-gutter-width) {
  padding-inline-end: math.ceil($gutter * 0.5);
  padding-inline-start: math.floor($gutter * 0.5);
  margin-inline-end: auto;
  margin-inline-start: auto;

  @include utilities.clearfix();
}

@mixin make-row($gutter: css-grid-variables.$grid-gutter-width) {
  margin-inline-end: math.floor(math.div($gutter, -2));
  margin-inline-start: math.ceil(math.div($gutter, -2));

  @include utilities.clearfix();
}

// Generate the small columns
@mixin make-sm-column($columns, $gutter: css-grid-variables.$grid-gutter-width) {
  position: relative;
  min-block-size: 1px;
  padding-inline-end: ($gutter * 0.5);
  padding-inline-start: ($gutter * 0.5);

  @media (min-width: media-query-breakpoints.$screen-sm-min) {
    float: inline-start;
    inline-size: math.percentage(math.div($columns, css-grid-variables.$grid-columns));
  }
}