/* stylelint-disable no-descending-specificity */
// html-grid.scss v1.0 | @ajlkn | MIT licensed */

// Mixins.

/// Initializes the current element as an HTML grid.
/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
@mixin html-grid($gutters: 1.5em, $suffix: '') {

    // Initialize.
    $cols: 12;
    $multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
    $unit: 100% / $cols;

    // Suffixes.
    $suffixes: null;

    @if (type-of($suffix) == 'list') {
        $suffixes: $suffix;
    } @else {
        $suffixes: ($suffix);
    }

    // Gutters.
    $guttersCols: null;
    $guttersRows: null;

    @if (type-of($gutters) == 'list') {

        $guttersCols: nth($gutters, 1);
        $guttersRows: nth($gutters, 2);

    } @else {

        $guttersCols: $gutters;
        $guttersRows: 0;

    }

    // Row.
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;

    // Columns.
    > * {
        box-sizing: border-box;
    }

    // Gutters.
    &.gtr-uniform {
        > * {
            > :last-child {
                margin-bottom: 0;
            }
        }
    }

    // Alignment.
    &.aln-left {
        justify-content: flex-start;
    }

    &.aln-center {
        justify-content: center;
    }

    &.aln-right {
        justify-content: flex-end;
    }

    &.aln-top {
        align-items: flex-start;
    }

    &.aln-middle {
        align-items: center;
    }

    &.aln-bottom {
        align-items: flex-end;
    }

    // Step through suffixes.
    @each $suffix in $suffixes {

        // Suffix.
        @if ($suffix != '') {
            $suffix: '-' + $suffix;
        } @else {
            $suffix: '';
        }

        // Row.

        // Important.
        > .imp#{$suffix} {
            order: -1;
        }

        // Columns, offsets.
        @for $i from 1 through $cols {
            > .col-#{$i}#{$suffix} {
                width: $unit * $i;
            }

            > .off-#{$i}#{$suffix} {
                margin-left: $unit * $i;
            }
        }

        // Step through multipliers.
        @each $multiplier in $multipliers {

            // Gutters.
            $class: null;

            @if ($multiplier != 1) {
                $class: '.gtr-' + ($multiplier * 100);
            }

            &#{$class} {
                margin-top: ($guttersRows * $multiplier * -1);
                margin-left: ($guttersCols * $multiplier * -1);

                > * {
                    padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
                }

                // Uniform.
                &.gtr-uniform {
                    margin-top: $guttersCols * $multiplier * -1;

                    > * {
                        padding-top: $guttersCols * $multiplier;
                    }
                }

            }

        }

    }

}
