@use 'sass:math';
@use 'sass:map';
@use '../settings';
@use '../mixin';

$grid-small-gutter: math.div(map.get(settings.$grid-gutter, 'small'), 2) !default;
$grid-medium-gutter: math.div(map.get(settings.$grid-gutter, 'medium'), 2) !default;
$grid-large-gutter: math.div(map.get(settings.$grid-gutter, 'large'), 2) !default;

@mixin add-gutter() {
    padding-left: $grid-small-gutter;
    padding-right: $grid-small-gutter;

    @include mixin.breakpoint(medium-up) {
        padding-left: $grid-medium-gutter;
        padding-right: $grid-medium-gutter;
    }

    @include mixin.breakpoint(large-up) {
        padding-left: $grid-large-gutter;
        padding-right: $grid-large-gutter;
    }
}

@mixin roolith-grid() {
    .container {
        max-width: var(--r-global-width);
        margin-left: auto;
        margin-right: auto;
    }

    .row {
        @include mixin.clearfix();
        @include add-gutter();
    }

    .columns {
        float: left;
        @include add-gutter();
    }

    .column {
        padding-left: map.get(settings.$grid-gutter, 'small');
        padding-right: map.get(settings.$grid-gutter, 'small');

        @include mixin.breakpoint(medium-up) {
            padding-left: map.get(settings.$grid-gutter, 'medium');
            padding-right: map.get(settings.$grid-gutter, 'medium');
        }

        @include mixin.breakpoint(large-up) {
            padding-left: map.get(settings.$grid-gutter, 'large');
            padding-right: map.get(settings.$grid-gutter, 'large');
        }
    }

    [class*='large-'],
    [class*='medium-'] {
        width: 100%;
    }

    @for $i from 1 through settings.$grid-column-count {
        .small-#{$i} {
            width: math.percentage(math.div($i, settings.$grid-column-count));
        }

        .small-offset-#{$i} {
            margin-left: math.percentage(math.div($i, settings.$grid-column-count));
        }

        .small-pull-#{$i} {
            position: relative;
            left: math.percentage(math.div($i, settings.$grid-column-count)) * -1;
        }

        .small-push-#{$i} {
            position: relative;
            left: math.percentage(math.div($i, settings.$grid-column-count));
        }
    }

    @include mixin.breakpoint(medium-up) {
        @for $i from 1 through settings.$grid-column-count {
            .medium-#{$i} {
                width: math.percentage(math.div($i, settings.$grid-column-count));
            }

            .medium-offset-#{$i} {
                margin-left: math.percentage(math.div($i, settings.$grid-column-count));
            }

            .medium-pull-#{$i} {
                position: relative;
                left: math.percentage(math.div($i, settings.$grid-column-count)) * -1;
            }

            .medium-push-#{$i} {
                position: relative;
                left: math.percentage(math.div($i, settings.$grid-column-count));
            }
        }
    }

    @include mixin.breakpoint(large-up) {
        @for $i from 1 through settings.$grid-column-count {
            .large-#{$i} {
                width: math.percentage(math.div($i, settings.$grid-column-count));
            }

            .large-offset-#{$i} {
                margin-left: math.percentage(math.div($i, settings.$grid-column-count));
            }

            .large-pull-#{$i} {
                position: relative;
                left: math.percentage(math.div($i, settings.$grid-column-count)) * -1;
            }

            .large-push-#{$i} {
                position: relative;
                left: math.percentage(math.div($i, settings.$grid-column-count));
            }
        }
    }

    .column .row,
    .row .row {
        padding-left: 0;
        padding-right: 0;
        margin-left: -$grid-small-gutter;
        margin-right: -$grid-small-gutter;

        @include mixin.breakpoint(medium-up) {
            margin-left: -$grid-medium-gutter;
            margin-right: -$grid-medium-gutter;
        }

        @include mixin.breakpoint(large-up) {
            margin-left: -$grid-large-gutter;
            margin-right: -$grid-large-gutter;
        }
    }

    .newrow {
        clear: left;
    }
}