@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;
    }

    @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
}
@mixin gridCont($break) {
    .#{$break}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;
            }
        }
    }
}
@include gridCont(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 gridCont($key);   
    }
}

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

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

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

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

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

        .#{$break}grid--gutters-y#{$key}{
            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%;
}

/* ALIGNMENT */
@mixin grid--align($break){
    @each $alignment in $horz{
        $alignment: #{to-lower-case($alignment)};
        
        .#{$break}grid--#{$alignment}{
            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);

@mixin grid--layout($break){
    /* BREAKPOINTS */
    @for $i from 1 through $gridFactor {
        $denom: math.div($gridFactor, $i);

        @if(is-integer($denom)){
            @for $j from 1 through $denom {
                $frac: "#{$j}\\/#{$denom}";

                .#{$break}grid--#{$frac}{
                    @if($i == 1){
                        @include gridChildren(math.div($j, $denom));
                    } @else{
                        @extend .#{$break}grid--#{$i * $j}\/#{$gridFactor};
                    }
                }

                .#{$break}grid__#{$frac}{
                    @if($i == 1){
                        @include grid(math.div($j, $denom));
                    } @else{
                        @extend .#{$break}grid__#{$i * $j}\/#{$gridFactor};
                    }
                }
            }
        } @else{
            @for $j from 1 through $i {
                $frac: "#{$j}\\/#{$i}";

                .#{$break}grid--#{$frac}{
                    @include gridChildren(math.div($j, $i));
                }

                .#{$break}grid__#{$frac}{
                    @include grid(math.div($j, $i));
                }
            }
        }
    }
}

@include grid--layout(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);

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

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