/*------------------------------------*\
    $WIDTHS
\*------------------------------------*/
/**
 * Sizes in human readable format. These are used in conjunction with other
 * objects and abstractions found in inuit.css, most commonly the grid system
 * and faux flexbox.
 *
 * We have a mixin to generate our widths and their breakpoint-specific
 * variations.
 */

@mixin grid-setup($namespace: "") {
    /**
    * Whole
    */
    .#{$namespace}one-whole         { width:100%; }


    /**
    * Halves
    */
    .#{$namespace}one-half          { width:50%; }


    /**
    * Thirds
    */
    .#{$namespace}one-third         { width:33.333%; }
    .#{$namespace}two-thirds        { width:66.666%; }


    /**
    * Quarters
    */
    .#{$namespace}one-quarter       { width:25%; }
    .#{$namespace}two-quarters      { @extend .#{$namespace}one-half; }
    .#{$namespace}three-quarters    { width:75%; }


    /**
    * Fifths
    */
    .#{$namespace}one-fifth         { width:20%; }
    .#{$namespace}two-fifths        { width:40%; }
    .#{$namespace}three-fifths      { width:60%; }
    .#{$namespace}four-fifths       { width:80%; }


    /**
    * Sixths
    */
    .#{$namespace}one-sixth         { width:16.666%; }
    .#{$namespace}two-sixths        { @extend .#{$namespace}one-third; }
    .#{$namespace}three-sixths      { @extend .#{$namespace}one-half; }
    .#{$namespace}four-sixths       { @extend .#{$namespace}two-thirds; }
    .#{$namespace}five-sixths       { width:83.333%; }


    /**
    * Eighths
    */
    .#{$namespace}one-eighth        { width:12.5%; }
    .#{$namespace}two-eighths       { @extend .#{$namespace}one-quarter; }
    .#{$namespace}three-eighths     { width:37.5%; }
    .#{$namespace}four-eighths      { @extend .#{$namespace}one-half; }
    .#{$namespace}five-eighths      { width:62.5%; }
    .#{$namespace}six-eighths       { @extend .#{$namespace}three-quarters; }
    .#{$namespace}seven-eighths     { width:87.5%; }


    /**
    * Tenths
    */
    .#{$namespace}one-tenth         { width:10%; }
    .#{$namespace}two-tenths        { @extend .#{$namespace}one-fifth; }
    .#{$namespace}three-tenths      { width:30%; }
    .#{$namespace}four-tenths       { @extend .#{$namespace}two-fifths; }
    .#{$namespace}five-tenths       { @extend .#{$namespace}one-half; }
    .#{$namespace}six-tenths        { @extend .#{$namespace}three-fifths; }
    .#{$namespace}seven-tenths      { width:70%; }
    .#{$namespace}eight-tenths      { @extend .#{$namespace}four-fifths; }
    .#{$namespace}nine-tenths       { width:90%; }


    /**
    * Twelfths
    */
    .#{$namespace}one-twelfth       { width:8.333%; }
    .#{$namespace}two-twelfths      { @extend .#{$namespace}one-sixth; }
    .#{$namespace}three-twelfths    { @extend .#{$namespace}one-quarter; }
    .#{$namespace}four-twelfths     { @extend .#{$namespace}one-third; }
    .#{$namespace}five-twelfths     { width:41.666% }
    .#{$namespace}six-twelfths      { @extend .#{$namespace}one-half; }
    .#{$namespace}seven-twelfths    { width:58.333%; }
    .#{$namespace}eight-twelfths    { @extend .#{$namespace}two-thirds; }
    .#{$namespace}nine-twelfths     { @extend .#{$namespace}three-quarters; }
    .#{$namespace}ten-twelfths      { @extend .#{$namespace}five-sixths; }
    .#{$namespace}eleven-twelfths   { width:91.666%; }
}

@include grid-setup();



/**
 * If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
 * access to these classes. You can define at which breakpoint you’d like an
 * element to be a certain size, e.g.:
 *
 * `<div class="g  one-quarter  lap-one-half  palm-one-whole"> ... </div>`
 *
 * This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
 * horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
 * at ‘mobile’ sizes.
 *
 * Demo: jsfiddle.net/inuitcss/WS4Ge
 *
 */

@if $responsive == true{

@include media-query(palm){
    @include grid-setup("palm-");
}

@include media-query(lap){
    @include grid-setup("lap-");
}

@include media-query(lap-and-up){
    @include grid-setup("lap-and-up-");
}

@include media-query(portable){
    @include grid-setup("portable-");
}

@include media-query(desk){
    @include grid-setup("desk-");
}


/**
 * If you have set the additional `$responsive-extra` variable to ‘true’ in
 * `_vars.scss` then you now have access to the following class available to
 * accomodate much larger screen resolutions.
 */

@if $responsive-extra == true{

@include media-query(desk-wide){
    @include grid-setup("desk-wide-");
}

}

} /* endif */