@import "./_grid";

/*
This exposes two mixins to aid in developing screens according to the nested grid design.

outer-guide: mix this into the body to get the outermost gridlines.

nested-guide: mix this into the body to see the combined outer and inner grids.

You can also add the Distribution-outer-guide or Distribution-nested-guide class
to the body in your browser.

*/

@function gutter-start($n, $opts) {
    @return ($n * map-get($opts, outer_column_width)
        + $n * map-get($opts, outer_gutter_width));
}

@function column-start($n, $opts) {
    @return ($n * map-get($opts, outer_column_width)
        + ($n + 1) * map-get($opts, outer_gutter_width));
}

@function gutter-guide($n, $opts) {
    @return map-get($opts, outer_gutter_color) gutter-start($n, $opts),
        map-get($opts, outer_gutter_color) column-start($n, $opts);
}

@function column-guide($n, $opts) {
    @return map-get($opts, outer_column_color) column-start($n, $opts),
        map-get($opts, outer_column_color) gutter-start($n + 1, $opts);
}

@function inner-gutter-start($n, $opts) {
    @return column-start(map-get($opts, inner_column_start), $opts) +
        ($n * map-get($opts, inner_column_width) +
         $n * map-get($opts, inner_gutter_width));
}

@function inner-column-start($n, $opts) {
    @return column-start(map-get($opts, inner_column_start), $opts) +
        ($n * map-get($opts, inner_column_width) +
        ($n + 1) * map-get($opts, inner_gutter_width));
}

@function inner-gutter-guide($n, $opts) {
    @return map-get($opts, inner_gutter_color) inner-gutter-start($n, $opts),
        map-get($opts, inner_gutter_color) inner-column-start($n, $opts);
}

@function inner-column-guide($n, $opts) {
    @return map-get($opts, inner_column_color) inner-column-start($n, $opts),
        map-get($opts, inner_column_color) inner-gutter-start($n + 1, $opts);
}

@mixin guide-support($opts) {
    content: "";
    height: 100%;
    left: 0;
    margin: 0 auto;
    pointer-events: none;
    position: fixed;
    right: 0;
    width:
        (map-get($opts, outer_gutter_width) * (map-get($opts, outer_column_count) + 1)) +
        (map-get($opts, outer_column_width) * map-get($opts, outer_column_count));
    z-index: 10;
}

@mixin outer-guide($opts: $guide_opts) {
    &::before {
        @include guide-support($opts);
        background:
            linear-gradient(
                90deg,
                gutter-guide(0, $opts),
                column-guide(0, $opts),
                gutter-guide(1, $opts),
                column-guide(1, $opts),
                gutter-guide(2, $opts),
                column-guide(2, $opts),
                gutter-guide(3, $opts),
                column-guide(3, $opts),
                gutter-guide(4, $opts),
                column-guide(4, $opts),
                gutter-guide(5, $opts),
                column-guide(5, $opts),
                gutter-guide(6, $opts),
                column-guide(6, $opts),
                gutter-guide(7, $opts),
                column-guide(7, $opts),
                gutter-guide(8, $opts),
                column-guide(8, $opts),
                gutter-guide(9, $opts),
                column-guide(9, $opts),
                gutter-guide(10, $opts),
                column-guide(10, $opts),
                gutter-guide(11, $opts),
                column-guide(11, $opts),
                gutter-guide(12, $opts)
            );
    }
}

@mixin nested-guide($opts: $guide_opts) {
    &::before {
        @include guide-support($opts);
        background:
            linear-gradient(
                90deg,
                gutter-guide(0, $opts),
                column-guide(0, $opts),
                gutter-guide(1, $opts),
                column-guide(1, $opts),
                gutter-guide(2, $opts),
                column-guide(2, $opts),
                gutter-guide(3, $opts),
                inner-gutter-guide(0, $opts),
                inner-column-guide(0, $opts),
                inner-gutter-guide(1, $opts),
                inner-column-guide(1, $opts),
                inner-gutter-guide(2, $opts),
                inner-column-guide(2, $opts),
                inner-gutter-guide(3, $opts),
                inner-column-guide(3, $opts),
                inner-gutter-guide(4, $opts),
                inner-column-guide(4, $opts),
                inner-gutter-guide(5, $opts),
                inner-column-guide(5, $opts),
                inner-gutter-guide(6, $opts),
                inner-column-guide(6, $opts),
                inner-gutter-guide(7, $opts),
                inner-column-guide(7, $opts),
                inner-gutter-guide(8, $opts),
                inner-column-guide(8, $opts),
                inner-gutter-guide(9, $opts),
                inner-column-guide(9, $opts),
                inner-gutter-guide(10, $opts),
                inner-column-guide(10, $opts),
                inner-gutter-guide(11, $opts),
                gutter-guide(12, $opts)
            );
    }
}

.Distribution-outer-guide {
    @include outer-guide();
}

.Distribution-nested-guide {
    @include nested-guide();
}