$context-id: 'grid' !default;

@include iro-context-stack-create($grid-context-id);

@mixin native-grid {
    @supports (display: grid) {
        @content;
    }
}

@mixin grid($columns: 12, $h-spacing: 0, $v-spacing: 0, $reverse: false) {
    display:         flex;
    flex-flow:       row wrap;
    align-items:     stretch;
    justify-content: flex-start;
    margin:          (-.5 * $v-spacing) (-.5 * $h-spacing);

    @if $reverse {
        flex-direction: row-reverse;
    }

    @include iro-context-push($grid-context-id, 'grid', (
        --h-spacing: $h-spacing,
        --v-spacing: $v-spacing,
        --columns:   $columns,
        --reverse:   $reverse
    ));

    @content;

    @include iro-context-pop($grid-context-id);
}

@mixin grid-col {
    @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');

    $data:      nth(iro-context-get($grid-context-id, 'grid'), 2);
    $v-spacing: map-get($data, --v-spacing);
    $h-spacing: map-get($data, --h-spacing);

    box-sizing: border-box;
    flex:       0 0 auto;
    margin:     .5 * $v-spacing .5 * $h-spacing;

    @include iro-context-push($grid-context-id, 'grid__col');

    @content;

    @include iro-context-pop($grid-context-id);
}

@mixin grid-col-span($i) {
    @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');

    $data:      nth(iro-context-get($grid-context-id, 'grid'), 2);
    $columns:   map-get($data, --columns);
    $h-spacing: map-get($data, --h-spacing);

    @if $h-spacing != 0 {
        width: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{($i - 1) * $h-spacing});
        //                                                ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
    } @else {
        width: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000});
    }
}

@mixin grid-col-shift($i) {
    @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');

    $data:      nth(iro-context-get($grid-context-id, 'grid'), 2);
    $columns:   map-get($data, --columns);
    $h-spacing: map-get($data, --h-spacing);
    $reverse:   map-get($data, --reverse);

    $prop: if($reverse, margin-right, margin-left);

    @if $i == 0 {
        #{$prop}: 0;
    } @else {
        @if $h-spacing != 0 {
            #{$prop}: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{$i * $h-spacing + $h-spacing / 2});
            //                                                   ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
        } @else {
            #{$prop}: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000});
            //                      ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
        }
    }
}