@use "sass:math";

@import "../config/index.scss";

// * Percentage-based size classes for a 24 column grid,
// * with reduced fractions for divisors of 24
// *
// * Responsive sizing included contingent on truth of $responsive

$cols: (2, 3, 4, 6, 8, 12, 24);
$responsive: true;

// Generate base utility size classes
@each $col in $cols {
  @for $i from 1 through ($col - 1) {
    .u-size#{$i}of#{$col} {
      flex-basis: auto !important;
      width: math.div($i, $col) * 100% !important;
    }
  }
}

// * Intrinsic widths from SUITCSS: https://github.com/suitcss/utils-size

// * Make an element shrink wrap its content.
.u-sizeFit {
  flex-basis: auto !important;
  width: auto !important;
}

// * Make an element fill the remaining space.
// *
// * 1. Be explicit to work around IE10 bug with shorthand flex
// *    http://git.io/vllC7
// * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
// *    http://git.io/vllMt
.u-sizeFill {
  flex: 1 1 0% !important; // 1
  flex-basis: 0% !important; // 2
}

// * 100% width
.u-sizeFull, .u-size1of1 {
  flex-basis: auto !important;
  width: 100% !important;
}

// * Generate responsive utility size classes for each 'breakpoint'
@if $responsive == true {
  @each $name, $value in $breakpoints {
    @media (min-width: $value) {
      @each $col in $cols {
        @for $i from 1 through ($col - 1) {
          .u-#{$name}-size#{$i}of#{$col} {
            flex-basis: auto !important;
            width: math.div($i, $col) * 100% !important;
          }
        }
      }

      .u-#{$name}-sizeFit {
        flex-basis: auto !important;
        width: auto !important;
      }

      .u-#{$name}-sizeFill {
        flex: 1 1 0% !important;
        flex-basis: 0% !important;
      }

      .u-#{$name}-sizeFull, .u-#{$name}-size1of1 {
        flex-basis: auto !important;
        width: 100% !important;
      }
    }
  }
}