/*------------------------------------*\
    #PUSHPULL-RESPONSIVE
\*------------------------------------*/

/**
 * Responsive push/pull classes based on your responsive settings.
 */
 
 
[class*="u-push-"]{ position:relative; }
[class*="u-pull-"]{ position:relative; }


///*------------------------------------*\
//    #PUSHPULL
//\*------------------------------------*/

// A mixin to spit out our push/pull classes. Pass in the columns we want the classes
// to have, and an optional suffix for responsive widths. E.g. to create thirds
// and quarters for a small breakpoint:
//
// @include inuit-push(3 4, -sm);
// @include inuit-pull(3 4, -sm);

// Predefine the variables below in order to alter and enable specific features.
// $inuit-pushpull-namespace: $inuit-namespace !default;

// Do we want to use classes like `<div class="push-1/4">` instead of
// `<div class="push-1-of-4">`?
$inuit-use-fractions: true !default;

// Depending on what we chose for `$inuit-use-fractions`, create the relevant
// delimiter.
@if ($inuit-use-fractions == true) {
    $inuit-widths-delimiter: \/ !global;
} @else {
    $inuit-widths-delimiter: -of- !global;
}

@mixin inuit-push($inuit-widths-columns, $inuit-widths-breakpoint: null) {

    // Loop through the number of columns for each denominator of our fractions.
    @each $inuit-widths-denominator in $inuit-widths-columns {

        // If we’re trying to make wholes, just spit a 100% width utility out
        // one time only.
        @if ($inuit-widths-denominator == 1) {
            // .u-1#{$inuit-widths-delimiter}1#{$inuit-widths-breakpoint} {
            //     left: 100% !important;
            //     position:relative;
            // }
        } @else {

            // Begin creating a numberator for our fraction up until we hit the
            // denominator.
            @for $inuit-widths-numerator from 1 to $inuit-widths-denominator {

                // Build a class in the format `.push-3/4` or `.push-3-of-4`.
                .u-push-#{$inuit-widths-numerator}#{$inuit-widths-delimiter}#{$inuit-widths-denominator}#{$inuit-widths-breakpoint} {
                    left: ($inuit-widths-numerator / $inuit-widths-denominator) * 100% !important;
                    position:relative;
                }

            }

        }

    }

}


@mixin inuit-pull($inuit-widths-columns, $inuit-widths-breakpoint: null) {

    // Loop through the number of columns for each denominator of our fractions.
    @each $inuit-widths-denominator in $inuit-widths-columns {

        // If we’re trying to make wholes, just spit a 100% width utility out
        // one time only.
        @if ($inuit-widths-denominator == 1) {
            // .u-1#{$inuit-widths-delimiter}1#{$inuit-widths-breakpoint} {
            //     right: 100% !important;
            //     position:relative;
            // }
        } @else {

            // Begin creating a numberator for our fraction up until we hit the
            // denominator.
            @for $inuit-widths-numerator from 1 to $inuit-widths-denominator {

                // Build a class in the format `.pull-3/4` or `.pull-3-of-4`.
                .u-pull-#{$inuit-widths-numerator}#{$inuit-widths-delimiter}#{$inuit-widths-denominator}#{$inuit-widths-breakpoint} {
                    right: ($inuit-widths-numerator / $inuit-widths-denominator) * 100% !important;
                    position:relative;
                }

            }

        }

    }

}




// By default we will create wholes, halves, thirds, quarters, and fifths.
// Predefine this Map to override.
$inuit-pushpull-columns-responsive: (1, 2, 3, 4, 5, 6, 7, 8) !default;

@each $inuit-pushpull-column in $inuit-pushpull-columns-responsive {
  @include inuit-push($inuit-pushpull-column);
  @include inuit-pull($inuit-pushpull-column);
}


// Loop over our breakpoints defined in _settings.responsive.scss
@each $breakpoint in $breakpoints {

    // Get the name of the breakpoint.
    $alias: nth($breakpoint, 1);
    
    
    $alias:     nth($breakpoint, 1);
    $condition: nth($breakpoint, 2);
    
    @include respond-to($alias){
    // Loop through each of our column sizes and generate its responsive push/pull classes.
      @each $inuit-pushpull-column in $inuit-pushpull-columns-responsive {
        @include inuit-push($inuit-pushpull-column, \@#{$alias});
        @include inuit-pull($inuit-pushpull-column, \@#{$alias});
      }
    }

}