/**

  @widths
---------------------------------------------------------
  layout/_widths.scss
--------------------------------------------------------

  Global Width Classes like .one-third or .seven-twelfths
  and responsive widths like .sm-one-third or .xl-one-half

  If you append the width class with a size indicator, the
  size will only be applied if the viewport is at least
  at that breakpoint size.

  Set the widths configuration variables below in this partial
  to specify how many or how few classes you want available
  in your project.

  Requires:
  * base/_vars.scss and the breakpoint mixin from
  * base/_mixin-breakpoints.scss

---------------------------------------------------------  */


// Widths configuration
// ------------------------------------------------------
// Define the number of divisions you want to use at each
// breakpoint. The breakpoints below match the values that
// you defined in base/_vars.scss 
//
// For example, if you define xs: 12, below... you'll end up
// with a media query for the xs breakpoint and 12 sets of
// easy-to-read width classes. Not 12 classes, but 12 SETS
// of classes like .one-third, .two-thirds, .three-thirds etc.
// This generates a lot of CSS (16kb compressed, non-gzipped), 
// all of it useful but why not specify the number of columns 
// you really need.
//
// NOTE: by default, we have 12 divisions for each breakpoint, which
// is the largest amount possible. Pare this down to what you need.
// You can use 0 [* TODO *] if you don't want any responsive width classes
// for any given breakpoint.
//
$widths__number-of-divisions-at-breakpoint: (
  n:   12,
  xs:  0,
  sm:  12,
  md:  12,
  lg:  12,
  xl:  12,
  xxl: 12
);


// 100% width classes:
// ------------------------------------------------------
// I would like all 100% width classes like .two-halves
// and .five-fifths. If you say false, you'll still get 
// .one-whole classes because those are super useful
//
$widths__generate-all-100-percent-widths: true; // true or false


// Generate common denominator widths:
// ------------------------------------------------------
// I would like to keep all width classes, even if the % value is 
// equal to another fraction like .four-eights or .two-sixths.
// Setting this to 'false' generates less code, but forces you
// to remember your fractions.
//
$widths__generate-common-denominator-widths: true; // true or false





// That's it - you're done
// ------------------------------------------------------
// NOTE: there's nothing else to edit after this line. All that
// follows are the functions/mixins that generate the code.


// ----------------------------------------------------
// Function to make easy-to-read class from number
// ----------------------------------------------------

// Define english for each integer
//
$english-by-number: (
  1:  "one",
  2:  "two",
  3:  "three",
  4:  "four",
  5:  "five",
  6:  "six",
  7:  "seven",
  8:  "eight",
  9:  "nine",
  10: "ten",
  11: "eleven",
  12: "twelve"
);

// Define english 'nth' for the denominators of
// our fractions
//
$english-nth-by-number: (
  1:  "whole",
  2:  "half",
  3:  "third",
  4:  "fourth",
  5:  "fifth",
  6:  "sixth",
  7:  "seventh",
  8:  "eighth",
  9:  "ninth",
  10: "tenth",
  11: "eleventh",
  12: "twelfth"
);

// Euclid's Algorithm to find GCD of Fraction
// used to determine if a fraction can be reduced 
//
// first, this assumes that $b > $a and they are non zero.
// It will always be so in our 
// case - so we're not going to add conditionals to check for this

@function gcd($a, $b) {
  @if ($b == 0) { @return $a; }
  @else {
    $remainder: $a%$b;
    @return gcd($b, $remainder);
  }  
}


// Mixin to return easy-to-read width class from 2 numbers
// Accepts a $numerator, $denominator, and optional breakpoint
// 
@mixin easy-to-read-width($numerator, $denominator, $breakpoint:"") {
  // Define optional prefix
  //
  $breakpoint-prefix: ".";
  @if ($breakpoint != "n") {  
    @if map-has-key($widths__number-of-divisions-at-breakpoint, $breakpoint) {
      $breakpoint-prefix: ".#{unquote($breakpoint)}-";
    }
  }
  
  // Define english and delimiter '-' for first part of class
  //
  $width-first-part: "#{map-get($english-by-number, $numerator)}-";
  
  // Define english nth for second part
  //
  $width-second-part: "#{map-get($english-nth-by-number, $denominator)}";
  @if ($numerator > 1) {
    $width-second-part: "#{$width-second-part}s";
  }
  @if ($width-second-part == "halfs") {
    $width-second-part: "halves";
  }
  
  // Here's the class
  // Return the class based on settings defined above
  //
  // If $widths__generate-all-100-percent-widths is false and $numerator/$denominator = 1. Only do this
  // for denominators above 1 so we still get .one-whole
  //
  @if ($widths__generate-all-100-percent-widths != true and $numerator/$denominator == 1 and $denominator > 1) {
    // We don't return the width in this situation
  }
  // If $widths__generate-common-denominator-widths is false
  //
  @elseif ($widths__generate-common-denominator-widths != true and gcd($numerator, $denominator) > 1) {
    // We don't return the width in this situation
  }
  @else {
    #{$breakpoint-prefix}#{$width-first-part}#{$width-second-part} { width: ($numerator/$denominator)*100%; }
  }
}

// Loop through all breakpoints in $widths__number-of-divisions-at-breakpoint
@each $breakpoint, $num-divisions in $widths__number-of-divisions-at-breakpoint {
  @if ($num-divisions > 0) {  
    @if ($breakpoint != "n") {
      /* 
        
        Responsive widths at $breakpoint__#{$breakpoint}
      
      ---------------------------------------------------- */  
      @include bp-at-least ( map-get($breakpoints, $breakpoint) ) {
        @for $i from 1 through $num-divisions {
          @for $j from 1 through $i {
            @include easy-to-read-width($j, $i, $breakpoint);
          }
        }
      }
    }
    @else {
      /*
        
        Widths at default Viewport 
      
      ---------------------------------------------------- */  
      @for $i from 1 through $num-divisions {
        @for $j from 1 through $i {
          @include easy-to-read-width($j, $i, $breakpoint);
        }
      }
    }
  }
}

// ----------------------------------------------------
// End function to make easy-to-read class from number
// ----------------------------------------------------