// 导入Sass内置的math模块
@use 'sass:math';

@import './var.scss';

@mixin clearfix {
  zoom: 1;
  &::before,
  &::after {
    content: '';
    display: table;
  }
  &::after {
    clear: both;
  }
}

// mixins for grid system
// ------------------------
@mixin make-row($gutter: $grid-gutter-width) {
  position: relative;
  margin-left: math.div($gutter, -2);
  margin-right: math.div($gutter, -2);
  height: auto;
  @include clearfix;
}

@mixin make-grid-columns() {
  @include col-loop(1, null);
}

@mixin col-loop($index, $list: null) {
  $item: '.#{$css-prefix}-col-#{$index}, .#{$css-prefix}-col-xs-#{$index}, .#{$css-prefix}-col-sm-#{$index}, .#{$css-prefix}-col-md-#{$index}, .#{$css-prefix}-col-lg-#{$index}';
  
  @if $index < $grid-columns {
    @include col-loop($index + 1, $item);
  } @else {
    #{$list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      padding-left: math.div($grid-gutter-width, 2);
      padding-right: math.div($grid-gutter-width, 2);
    }
  }
}

@mixin float-grid-columns($class) {
  @include float-col-loop(1, $class, '');
}

@mixin float-col-loop($index, $class, $list) {
  $item: '.#{$css-prefix}-col#{$class}-#{$index}';
  
  @if $list == '' {
    $list: $item;
  } @else {
    $list: '#{$list}, #{$item}';
  }
  
  @if $index < $grid-columns {
    #{$list} {
      float: left;
      flex: 0 0 auto;
    }
    @include float-col-loop($index + 1, $class, $list);
  } @else {
    #{$list} {
      float: left;
      flex: 0 0 auto;
    }
  }
}

@mixin loop-grid-columns($index, $class) {
  @if $index > 0 {
    .#{$css-prefix}-col#{$class}-#{$index} {
      display: block;
      box-sizing: border-box;
      width: percentage(math.div($index, $grid-columns));
    }
    .#{$css-prefix}-col#{$class}-push-#{$index} {
      left: percentage(math.div($index, $grid-columns));
    }
    .#{$css-prefix}-col#{$class}-pull-#{$index} {
      right: percentage(math.div($index, $grid-columns));
    }
    .#{$css-prefix}-col#{$class}-offset-#{$index} {
      margin-left: percentage(math.div($index, $grid-columns));
    }
    .#{$css-prefix}-col#{$class}-order-#{$index} {
      order: $index;
    }
    @include loop-grid-columns($index - 1, $class);
  }

  @if $index == 0 {
    .#{$css-prefix}-col#{$class}-#{$index} {
      display: none;
    }
    .#{$css-prefix}-col-push-#{$index} {
      left: auto;
    }
    .#{$css-prefix}-col-pull-#{$index} {
      right: auto;
    }
    .#{$css-prefix}-col#{$class}-push-#{$index} {
      left: auto;
    }
    .#{$css-prefix}-col#{$class}-pull-#{$index} {
      right: auto;
    }
    .#{$css-prefix}-col#{$class}-offset-#{$index} {
      margin-left: 0;
    }
    .#{$css-prefix}-col#{$class}-order-#{$index} {
      order: 0;
    }
  }
}

@mixin make-grid($class: '') {
  @include float-grid-columns($class);
  @include loop-grid-columns($grid-columns, $class);
}