// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group flex-grid
////


/// 给row一个margin
@mixin grid-row-nest($gutter: $grid-column-gutter) {
    $margin: auto;
    @if type-of($gutter) == 'number' {
        $margin: $gutter / 2 * -1px;
    }
    margin-left: $margin;
    margin-right: $margin;
}

@mixin grid-context(
    $columns,
    $root: false
) {
    // Store the current column count so it can be re-set later
    $old-grid-column-count: $grid-column-count;
    $grid-column-count: $columns !global;

    @if $root {
        @at-root { @content; }
    }
    @else {
        @content;
    }

    // Restore the old column count
    $grid-column-count: $old-grid-column-count;
}

/// Creates a container for a flex grid row.
///
/// @param {Keyword|List} $behavior [null]
///   Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
/// @param {Number} $width [$grid-row-width] - Maximum width of the row.
/// @param {Number} $columns [null] - 不设置，使用$global-column-count
/// @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output.
/// @param {Number} $gutter [$grid-column-gutter] - Gutter to use when inverting margins, in case the row is nested.
@mixin flex-grid-row(
    $behavior: null,
    $width: $grid-row-width,
    $columns: null,
    $base: true,
    $gutter: $grid-column-gutter
) {
    $margin: auto;

    @if index($behavior, nest) != null { // 嵌套

        @include grid-row-nest($gutter);

    } @else if index($behavior, collapse) != null { // 折叠
        margin-left: 0;
        margin-right: 0;

    } @else {
        max-width: $width;
        margin-left: auto;
        margin-right: auto;
    }

    @if $base {
        display: flex;
        flex-flow: row wrap;
    }

    @if $columns != null {
        @include grid-context($columns, $base) {
            @content;
        }
    }

    //@include clearfix;
}

/// Calculates the `flex` property for a flex grid column. It accepts all of the same values as the basic `grid-column()` function, along with two extras:
///   - `null` (the default) will make the column expand to fill space.
///   - `shrink` will make the column contract, so it only takes up the horizontal space it needs.
///
/// @param {Mixed} $columns [null] - Width of the column.
@function flex-grid-column($columns: null) {
    // scss-lint:disable ZeroUnit
    $flex: 1 1 0px;

    @if $columns == shrink {
        $flex: 0 0 auto;
    } @else if $columns != null {
        $flex: 0 0 grid-column($columns);
    }

    @return $flex;
}

/// Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the `unstack` class on the parent flex row.
///
/// @param {Mixed} $columns [null] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
/// @param {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding.
@mixin flex-grid-column(
    $columns: null,
    $gutter: $grid-column-gutter
) {
    // Base properties
    flex: flex-grid-column($columns);

    // Gutters
    @if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
        $padding: $gutter / 2 * 1px;
        padding-left: $padding;
        padding-right: $padding;
    }

    // max-width fixes IE 10/11 not respecting the flex-basis property
    @if $columns != null and $columns != shrink {
        max-width: grid-column($columns);
    }
    //float: left;
    position: relative;
    max-width: 100%;

    //& > div{
    //    height: 100%;
    //}
}

/// Creates a block grid for a flex grid row.
///
/// @param {Number} $n - Number of columns to display on each row.
/// @param {String} $selector - Selector to use to target columns within the row.
@mixin flex-grid-layout(
    $n,
    $selector: '.column'
) {
    flex-wrap: wrap;

    > #{$selector} {
        $pct: percentage(1/$n);

        flex: 0 0 $pct;
        max-width: $pct;
    }
}

/// Sizes child elements so that `$n` number of items appear on each row.
///
/// @param {Number} $n - Number of elements to display per row.
/// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
@mixin grid-layout(
    $n,
    $selector: '.column'
) {
    & > #{$selector} {
        width: percentage(1/$n);
        float: left;

        &:nth-of-type(1n) {
            clear: none;
        }

        &:nth-of-type(#{$n}n+1) {
            clear: both;
        }

        &:last-child {
            float: left;
        }
    }
}

/// Offsets a column to the right by `$n` columns.
/// @param {Number|List} $n - Width to offset by. You can pass in any value accepted by the `grid-column()` mixin, such as `6`, `50%`, or `1 of 2`.
@mixin grid-column-offset($n) {
    margin-left: grid-column($n);
}

@mixin ne-flex-grid {
    // Row
    .row {
        @include flex-grid-row(nest);

        // Expanded row
        &.expanded {
            max-width: none;
        }

        &.collapse {
            @include flex-grid-row(collapse);
            > .column {
                padding-left: 0;
                padding-right: 0;
            }
        }

        // Nesting behavior
        & &:not(.collapse) {
            @include flex-grid-row(nest, $base: false);
        }

        @each $align, $value in $flex-justify {
            &.row-justify-#{$align} {
                justify-content: $value;
            }
        }

        @each $align, $value in $flex-align {
            &.row-align-#{$align} {
                align-items: $value;
            }
        }
    }

    // Column
    .column {
        @include flex-grid-column;

        @each $align, $value in $flex-align {
            &.column-align-#{$align} {
                align-self: $value;
            }
        }
    }

    // Column row
    // The double .row class is needed to bump up the specificity
    //.column .row .row {
    //    float: none;
    //
    //    // To properly nest a column row, padding and margin is removed
    //    .row & {
    //        padding-left: 0;
    //        padding-right: 0;
    //        margin-left: 0;
    //        margin-right: 0;
    //    }
    //}

    @each $size in (column) {
        @for $i from 1 through $grid-column-count {
            // Sizing (percentage)
            .#{$size}-#{$i} {
                flex: flex-grid-column($i);
                max-width: grid-column($i);
            }

            // Offsets
            $o: $i - 1;
            .#{$size}-offset-#{$o} {
                @include grid-column-offset($o);
            }
        }

        // ordering
        @for $i from 1 through 6 {
            .#{$size}-order-#{$i} {
                @include flex-order($i);
            }

            .#{$size}-up-#{$i} {
                @include flex-grid-layout($i);
            }
        }

        // Block grid
        //@for $i from 1 through $block-grid-max {
        //    .#{$size}-up-#{$i} {
        //        @include grid-layout($i);
        //    }
        //}
    }

    // Sizing (shrink)
    .shrink {
        flex: flex-grid-column(shrink);
        max-width: 100%;
    }

    .columns {
        // scss-lint:disable PlaceholderInExtend
        @extend .column;
    }
}