/*------------------------------------*\
  #WIDTHS
\*------------------------------------*/

// 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);

@mixin widths($widths-columns, $widths-breakpoint: 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-#{$widths-numerator}\/#{$widths-denominator}#{$widths-breakpoint},
      .u-#{$widths-numerator}\/#{$widths-denominator}#{$widths-breakpoint} {
        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-7/12">
 */

@include widths(1 2 3 4 5 6 7 8 9 10 11 12);

@include respond-to('only-tiny'){
    // @include widths(1 2 3 4 5, \@small);
  @include widths(1 2 3 4, \@only-tiny);
}

@include respond-to('tiny'){
    // @include widths(1 2 3 4 5, \@small);
  @include widths(1 2 3 4 5 6 7 8 9 10 11 12, \@tiny);
}

@include respond-to('small'){
    // @include widths(1 2 3 4 5, \@small);
  @include widths(1 2 3 4 5 6 7 8 9 10 11 12, \@small);
}

@include respond-to('medium'){
  @include widths(1 2 3 4 5 6 7 8 9 10 11 12, \@medium);
}

@include respond-to('large'){
  @include widths(1 2 3 4 5 6 7 8 9 10 11 12, \@large);
}