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

////
/// @group float grid
////

/// 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.
/// @param {Number|List} $gutter
/// The gutter to apply to child elements. Accepts multiple values:
/// `$grid-column-gutter` will use the values in the `$grid-column-gutter map/, including breakpoint sizes.
/// A fixed numeric value will apply this gutter to all breakpoints.
@mixin grid-layout($n, $selector: '.column', $gutter: null) {
    & > #{$selector} {
        float: $global-left;
        width: percentage(1/$n);

        @if($gutter) {
            @if type-of($gutter) == 'map' {
                @each $breakpoint, $value in $gutter {
                    $padding: $value / 2;
                    @include breakpoint($breakpoint) {
                        padding-left: $padding;
                        padding-right: $padding;
                    }
                }
            } @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
                $padding: $gutter / 2;
                padding-left: $padding;
                padding-right: $padding;
            }
        }

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

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

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

/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.
///
/// @param {Number} $n - Number of items that appear in each row.
@mixin grid-layout-center-last($n) {
    @for $i from 1 to $n {
        @if $i == 1 {
            &:nth-child(#{$n}n+1):last-child {
                margin-left: (100 - 100/$n * $i) / 2 * 1%;
            }
        } @else {
            &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
                margin-left: (100 - 100/$n * $i) / 2 * 1%;
            }
        }
    }
}