/* ==========================================================================
   #RESPONSIVE WIDTH UTILITIES
   ========================================================================== */

// A mixin to spit out our width classes. Pass in the columns we want the widths
// to have, and an optional suffix for responsive widths. E.g. to create thirds
// and quarters for a small breakpoint:
//
// @include widths(3 4, -sm);
$bolt-width-sizes: 1 2 3 4 5 6 7 8 9 10 11 12 !default;
$bolt-offset-sizes: 12 !default;

@mixin bolt-offsets($offset-columns, $breakpoint-suffix: null) {
  @each $offset-denominator in $offset-columns {
    @for $offset-numerator from 0 through $offset-denominator {
      .u-bolt-push-#{$offset-numerator}\/#{$offset-denominator}#{$breakpoint-suffix} {
        margin-left: ($offset-numerator / $offset-denominator) * 100% !important;
      }

      .u-bolt-pull-#{$offset-numerator}\/#{$offset-denominator}#{$breakpoint-suffix} {
        margin-left: ($offset-numerator / $offset-denominator) * -100% !important;
      }
    }
  }
}

@mixin bolt-widths($widths-columns, $breakpoint-suffix: null) {
  // Loop through the number of columns for each denominator of our fractions.
  @each $widths-denominator in $widths-columns {
    // Begin creating a numberator for our fraction up until we hit the
    // denominator.
    @for $widths-numerator from 1 through $widths-denominator {
      // Build a class in the format `.u-3/4` or `.u-3-of-4`.
      .u-bolt-width-#{$widths-numerator}\/#{$widths-denominator}#{$breakpoint-suffix} {
        width: ($widths-numerator / $widths-denominator) * 100% !important;
      }
    }
  }
}

/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken-
 * word format (e.g. `.u-2-of-3`). Use these in your markup:
 *
 * <div class="u-width-7/12">
 */
@include bolt-widths($bolt-width-sizes);
@include bolt-offsets($bolt-offset-sizes);

// Loop over our breakpoints
@each $breakpoint in $bolt-breakpoints {
  $breakpointName: nth($breakpoint, 1);
  @include bolt-mq($breakpointName) {
    @include bolt-offsets($bolt-offset-sizes, \@#{$breakpointName});
    @include bolt-widths($bolt-width-sizes, \@#{$breakpointName});
  }
}

@include export-data('widths.bolt.json', $bolt-width-sizes);


// @todo: refactor to add fuller support for max-width utils
.u-bolt-max-width-none {
  max-width: none !important;
}