@use "sass:math";

@if $align-block-grid-to-grid {
  $block-grid-default-spacing: $column-gutter;
}
$block-grid-media-queries: true !default;

@mixin block-grid(
  $per-row: false,
  $spacing: $block-grid-default-spacing,
  $include-spacing: true,
  $md-gray-50-style: true
) {
  @if $md-gray-50-style {
    display: block;
    padding: 0;

    @if $align-block-grid-to-grid {
      margin: 0;
    } @else {
      margin: 0 (-$spacing*0.5);
    }

    @include clearfix;

    > li {
      display: block;
      float: $default-float;
      height: auto;
      padding: 0 ($spacing*0.5) $spacing;
    }
  }

  @if $per-row {
    > li {
      width: math.div(100%, $per-row);
      padding: 0 ($spacing*0.5) $spacing;
      list-style: none;

      &:nth-of-type(1n) {
        clear: none;
      }

      &:nth-of-type(#{$per-row}n + 1) {
        clear: both;
      }

      @if $align-block-grid-to-grid {
        @include block-grid-aligned($per-row, $spacing);
      }
    }
  }
}

@mixin block-grid-aligned($per-row, $spacing) {
  @for $i from 1 through $block-grid-elements {
    @if $per-row >= $i {
      $grid-column: '+' + $i;

      @if $per-row == $i {
        $grid-column: '';
      }

      &:nth-of-type(#{$per-row}n#{unquote($grid-column)}) {
        padding-right: ($spacing - (math.div($spacing, $per-row) * $i));
        padding-left: (
          $spacing - (math.div($spacing, $per-row) * ($per-row - ($i - 1)))
        );
      }
    }
  }
}

@mixin block-grid-html-classes($size, $include-spacing) {
  @for $i from 1 through $block-grid-elements {
    .#{$size}-block-grid-#{($i)} {
      @include block-grid(
        $i,
        $block-grid-default-spacing,
        $include-spacing,
        false
      );
    }
  }
}

@include exports('block-grid') {
  [class*='block-grid-'] {
    @include block-grid;
  }

  @if $block-grid-media-queries {
    @media #{$small-up} {
      @include block-grid-html-classes($size: small, $include-spacing: false);
    }

    @media #{$medium-up} {
      @include block-grid-html-classes($size: medium, $include-spacing: false);
    }

    @media #{$large-up} {
      @include block-grid-html-classes($size: large, $include-spacing: false);
    }

    @media #{$xlarge-up} {
      @include block-grid-html-classes($size: xlarge, $include-spacing: false);
    }

    @media #{$xxlarge-up} {
      @include block-grid-html-classes($size: xxlarge, $include-spacing: false);
    }
  }
}

/* begin block-grid override */
@mixin block-grid(
  $per-row: false,
  $spacing: $block-grid-default-spacing,
  $include-spacing: true,
  $md-gray-50-style: true,
  $align-to-grid: $align-block-grid-to-grid
) {
  @if $md-gray-50-style {
    display: block;
    padding: 0;

    @if $align-to-grid {
      margin: 0;
    } @else {
      margin: 0 (-$spacing * 0.5);
    }

    @include clearfix;

    > * {
      display: block;
      float: $default-float;
      height: auto;
      padding: 0 ($spacing * 0.5) $spacing;
    }

    &.collapse {
      & > * {
        padding: 0;
      }
    }
  }

  @if $per-row {
    > * {
      width: math.div(100%, $per-row);
      padding: 0 ($spacing * 0.5) $spacing;
      list-style: none;

      &:nth-of-type(1n) {
        clear: none;
      }

      &:nth-of-type(#{$per-row}n + 1) {
        clear: both;
      }

      @if $align-to-grid {
        @include block-grid-aligned($per-row, $spacing);
      }
    }
  }
}