@use "sass:math";

@mixin legacy(){
    @if ($legacy){
        .legacy &, .no-flexbox &, .no-csscalc &, .no-js &{
            @content;
        }
    }
}

@mixin modern(){
    .modern &, .flexbox.csscalc.js &{
        @content;
    }
}

/* GRID */
@mixin gridCode($percent, $size, $children: false){
    @include modern(){
        max-width: $percent; /* Hack only needed for IE 11 see: http://stackoverflow.com/a/21950351/1213795 */
        flex-basis: $percent;
        //overflow: hidden; /* Stops wrapping when content overflows */ REMOVE IN FAVOUR OF INNER DIV AND FULL WIDTH UTILITY (allows for box-shadow and such on cards)
    }

    @include legacy(){
        width: $percent;
    }
}

@mixin grid($size){
    $percent : $size * 100%;

    @include gridCode($percent, $size);
}

@mixin gridChildren($size){
    $percent : $size * 100%;

    & > *{
        @include gridCode($percent, $size, true);
    }
}

.container{
    max-width: $grid;
    margin: 0 auto;
    display: block; // <= IE11 fix
}

.grid{
    @include modern(){
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        align-content: stretch;
        flex-basis: 100%;
    }

    .flex > &{
        @include modern(){ /* Width 100% would be better but firefox won't use the calculated value */
            flex-basis: calc(100% + #{$spacing});
        }
    }

    & > *{
        box-sizing: border-box;
    }

    @include legacy(){
        & > *{
            display: inline-block;
            vertical-align: top;
        }
    }
}

@mixin gutterMixin($break){
    @for $i from 1 through length($spaces) {
        $keys: map-keys($spaces); $key: nth($keys, $i); $size: map-get($spaces, $key);

        .grid--gutters#{$key}#{$break}{
            margin: 0 #{-$size * 0.5} 0 #{-$size * 0.5};

            & > *{
                padding-right: $size * 0.5;
                padding-left: $size * 0.5;
            }
        }

        .grid--vertGutters#{$key}#{$break}{
            margin-bottom: -$size;

            & > *{
                margin-bottom: $size;
            }
        }
    }
}

@include gutterMixin(null);

@for $i from 1 through length($breakpoints) {
    $keys: map-keys($breakpoints); $key: nth($keys, $i); $break: map-get($breakpoints, $key);

    @include breakpoint(max-width $break){
        @include gutterMixin($key);   
    }
}

.grid__inner{
    width: 100%;
}

/* BREAKPOINTS */
@each $size in $sizes{
    $i: index($sizes, $size);

    .grid--#{$size}s{
        @include gridChildren(math.div(1, $i));
    }

    .grid__#{$size}{
        @include grid(math.div(1, $i));
    }
}

@each $offKey, $offSize in $offSizes{
    .grid__#{$offKey}{
        @include grid($offSize);
    }
}

/* ALIGNMENT */
@mixin grid--align($break){
    @each $alignment in $horz{
        $alignment: #{to-lower-case($alignment)};
        
        .grid--#{$alignment}#{$break}{
            text-align: $alignment;
    
            @include modern(){
                @if($alignment == 'left'){
                    justify-content: flex-start;
                } @else if($alignment == 'right'){
                    justify-content: flex-end;
                } @else{
                    justify-content: $alignment;
                }
            }
        }
    }
}

@include grid--align(null);

/* BREAKPOINTS & ALIGNMENT FOR ALL BREAKPOINTS */
@for $i from 1 through length($breakpoints) {
    $keys: map-keys($breakpoints); $key: nth($keys, $i); $break: map-get($breakpoints, $key);

    @each $size in $sizes{
        $i: index($sizes, $size);

        @include breakpoint(max-width $break){
            .grid--#{$size}s#{$key}{
                @include gridChildren(math.div(1, $i));
            }
        }

        @include breakpoint(max-width $break){
            .grid__#{$size}#{$key}{
                @include grid(math.div(1, $i));
            }
        }
    }

    @each $offKey, $offSize in $offSizes{
        @include breakpoint(max-width $break){
            .grid__#{$offKey}#{$key}{
                @include grid($offSize);
            }
        }
    }

    @include breakpoint(max-width $break){
        @include grid--align($key);
    }
}