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

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

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

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

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

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

    .grid-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');
        }
    }

    .grid {
        @include add-css-grid-gutter();
        display: grid;
        grid-template-columns: repeat(settings.$grid-column-count, 1fr);
        grid-gap: $grid-css-grid-small-gutter;

        @include mixin.breakpoint(medium-up) {
            grid-gap: $grid-css-grid-medium-gutter;
        }

        @include mixin.breakpoint(large-up) {
            grid-gap: $grid-css-grid-large-gutter;
        }
    }

    [class^='lg-'],
    [class^='md-'] {
        grid-column: span settings.$grid-column-count;
    }

    @for $i from 1 through settings.$grid-column-count {
        .sm-#{$i} {
            grid-column: span $i;
        }

        .sm-push-#{$i} {
            position: relative;
            left: percentage($i / settings.$grid-column-count);
            margin-left: $grid-css-grid-small-gutter / 2;
            margin-right: - $grid-css-grid-small-gutter / 2;
        }

        .sm-pull-#{$i} {
            position: relative;
            left: - percentage($i / settings.$grid-column-count);
            margin-left: - $grid-css-grid-small-gutter / 2;
            margin-right: $grid-css-grid-small-gutter / 2;
        }
    }

    @include mixin.breakpoint(medium-up) {
        @for $i from 1 through settings.$grid-column-count {
            .md-#{$i} {
                grid-column: span $i;
            }

            .md-push-#{$i} {
                position: relative;
                left: percentage($i / settings.$grid-column-count);
                margin-left: $grid-css-grid-medium-gutter / 2;
                margin-right: - $grid-css-grid-medium-gutter / 2;
            }

            .md-pull-#{$i} {
                position: relative;
                left: - percentage($i / settings.$grid-column-count);
                margin-left: - $grid-css-grid-medium-gutter / 2;
                margin-right: $grid-css-grid-medium-gutter / 2;
            }
        }
    }

    @include mixin.breakpoint(large-up) {
        @for $i from 1 through settings.$grid-column-count {
            .lg-#{$i} {
                grid-column: span $i;
            }

            .lg-push-#{$i} {
                position: relative;
                left: percentage($i / settings.$grid-column-count);
                margin-left: $grid-css-grid-large-gutter / 2;
                margin-right: - $grid-css-grid-large-gutter / 2;
            }

            .lg-pull-#{$i} {
                position: relative;
                left: - percentage($i / settings.$grid-column-count);
                margin-left: - $grid-css-grid-large-gutter / 2;
                margin-right: $grid-css-grid-large-gutter / 2;
            }
        }
    }

    .grid-column .grid,
    .grid .grid {
        padding-left: 0;
        padding-right: 0;
    }
}