// ---------------------------------------------------------------------
//  Grid
// ---------------------------------------------------------------------

$grid-columns: 12;
$grid-gutter-width: 36px;


// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col--xs--#{$i}, .col--sm--#{$i}, .col--md--#{$i}, .col--lg--#{$i}") {
    @for $i from (1 + 1) through $grid-columns {
        $list: "#{$list}, .col--xs--#{$i}, .col--sm--#{$i}, .col--md--#{$i}, .col--lg--#{$i}";
    }
    #{$list} {
        position: relative;
        min-height: 1px;
        padding-left:  ceil(($grid-gutter-width / 2));
        padding-right: floor(($grid-gutter-width / 2));
    }
}


// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-grid-columns($class, $i: 1, $list: ".col--#{$class}--#{$i}") {
    @for $i from (1 + 1) through $grid-columns {
        $list: "#{$list}, .col--#{$class}--#{$i}";
    }
}


@mixin calc-grid-column($index, $class, $type) {
    @if ($type == width) and ($index > 0) {
        .col--#{$class}--#{$index} {
            width: percentage(($index / $grid-columns));
        }
    }
    @if ($type == push) and ($index > 0) {
        .col--#{$class}--push--#{$index} {
            left: percentage(($index / $grid-columns));
        }
    }
    @if ($type == push) and ($index == 0) {
        .col--#{$class}--push--0 {
            left: auto;
        }
    }
    @if ($type == pull) and ($index > 0) {
        .col--#{$class}--pull--#{$index} {
            right: percentage(($index / $grid-columns));
        }
    }
    @if ($type == pull) and ($index == 0) {
        .col--#{$class}--pull--0 {
            right: auto;
        }
    }
    @if ($type == offset) {
        .col--#{$class}--offset--#{$index} {
            margin-left: percentage(($index / $grid-columns));
        }
    }
}

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-grid-columns($columns, $class, $type) {
    @for $i from 0 through $columns {
        @include calc-grid-column($i, $class, $type);
    }
}


// Create grid for specific class
@mixin make-grid($class) {
    @include float-grid-columns($class);
    @include loop-grid-columns($grid-columns, $class, width);
    @include loop-grid-columns($grid-columns, $class, pull);
    @include loop-grid-columns($grid-columns, $class, push);
    @include loop-grid-columns($grid-columns, $class, offset);
}


// Grid system
//
// Generate semantic grid columns with these mixins.


// ----------------------------------------
// Centered container element
// ----------------------------------------
@mixin container-fixed($gutter: $grid-gutter-width) {
    margin-right: auto;
    margin-left: auto;
    padding-left:  floor(($gutter / 2));
    padding-right: ceil(($gutter / 2));
    @include clearfix;
}


// ----------------------------------------
// Creates a wrapper for a series of columns
// ----------------------------------------
@mixin make-row($gutter: $grid-gutter-width) {
    margin-left:  ceil(($gutter / -2));
    margin-right: floor(($gutter / -2));
    @include clearfix;
}

// ----------------------------------------
// Generate the extra small columns
// ----------------------------------------
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
    position: relative;
    float: left;
    width: percentage(($columns / $grid-columns));
    min-height: 1px;
    padding-left:  ($gutter / 2);
    padding-right: ($gutter / 2);
}
@mixin make-xs-column-offset($columns) {
    margin-left: percentage(($columns / $grid-columns));
}
@mixin make-xs-column-push($columns) {
    left: percentage(($columns / $grid-columns));
}
@mixin make-xs-column-pull($columns) {
    right: percentage(($columns / $grid-columns));
}


// ----------------------------------------
// Generate the small columns
// ----------------------------------------

@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left:  ($gutter / 2);
    padding-right: ($gutter / 2);

    @include start-at($small) {
        float: left;
        width: percentage(($columns / $grid-columns));
    }
}
@mixin make-sm-column-offset($columns) {
    @include start-at($small) {
        margin-left: percentage(($columns / $grid-columns));
    }
}
@mixin make-sm-column-push($columns) {
    @include start-at($small) {
        left: percentage(($columns / $grid-columns));
    }
}
@mixin make-sm-column-pull($columns) {
    @include start-at($small) {
        right: percentage(($columns / $grid-columns));
    }
}


// ----------------------------------------
// Generate the medium columns
// ----------------------------------------

@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left:  ($gutter / 2);
    padding-right: ($gutter / 2);

    @include start-at($medium) {
        float: left;
        width: percentage(($columns / $grid-columns));
    }
}
@mixin make-md-column-offset($columns) {
    @include start-at($medium) {
        margin-left: percentage(($columns / $grid-columns));
    }
}
@mixin make-md-column-push($columns) {
    @include start-at($medium) {
        left: percentage(($columns / $grid-columns));
    }
}
@mixin make-md-column-pull($columns) {
    @include start-at($medium) {
        right: percentage(($columns / $grid-columns));
    }
}


// ----------------------------------------
// Generate the large columns
// ----------------------------------------

@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left:  ($gutter / 2);
    padding-right: ($gutter / 2);

    @include start-at($large) {
        float: left;
        width: percentage(($columns / $grid-columns));
    }
}
@mixin make-lg-column-offset($columns) {
    @include start-at($large) {
        margin-left: percentage(($columns / $grid-columns));
    }
}
@mixin make-lg-column-push($columns) {
    @include start-at($large) {
        left: percentage(($columns / $grid-columns));
    }
}
@mixin make-lg-column-pull($columns) {
    @include start-at($large) {
        right: percentage(($columns / $grid-columns));
    }
}


// --------------------------------------------------
// Grid system
// --------------------------------------------------

.row {
    @include make-row;
    display: flex;
    flex-wrap: wrap;
}

.row--align-center {
    align-items: center;
}

.row--flush {
    @include make-row;
    *[class*='col--xs--'],
    *[class*='col--sm--'],
    *[class*='col--md--'],
    *[class*='col--lg--'] {
        padding-left: 0;
        padding-right: 0;
    }
    margin-left: 0;
    margin-right: 0;
}


// Columns
// Common styles for small and large grid columns
@include make-grid-columns;


// Extra small grid
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
@include make-grid(xs);


// Small grid
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@include start-at($small) {
    @include make-grid(sm);
}


// Medium grid
// Columns, offsets, pushes, and pulls for the desktop device range.
@include start-at($medium) {
    @include make-grid(md);
}


// Large grid
// Columns, offsets, pushes, and pulls for the large desktop device range.
@include start-at($large) {
    @include make-grid(lg);
}
