@import '../../helpers/_size.scss';

/* GRID */

:root {
    --gap-0: 0;
    --gap-1: 0.25rem;
    --gap-2: 0.5rem;
    --gap-3: 1rem;
    --gap-4: 1.25rem;
    --gap-5: 1.5rem;
    --gap-6: 2rem;
    --gap-7: 3rem;
    --gap-8: 4rem;
    --gap-9: 5rem;
    --gap-10: 7rem;
    --gap-11: 9rem;
    --gap-12: 12rem;
}

.grid {
    --grid-gap: --gap-2;
    --grid-template-column: repeat(#{$grid-columns}, minmax(0, 1fr));
    --grid-column-start: auto;
    --grid-column-end: auto;
    --grid-row-start: auto;
    --grid-row-end: auto;

    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: var(--grid-template-column);

    @for $i from 1 through 12 {
        /* Gap */
        &.grid-gap-#{$i} {
            --grid-gap: var(--gap-#{$i});
        }
    }

    @for $i from 1 through $grid-columns {
        /* Templates */
        &.grid-cols-#{$i} {
            --grid-template-column: repeat(#{$i}, minmax(0, 1fr));
        }

        /* Column expansion */
        .grid-c-#{$i} {
            grid-column: span #{$i} / span #{$i};
        }

        /* Row expansion */
        .grid-r-#{$i} {
            grid-row: span #{$i} / span #{$i};
        }

        /* Cell Column Start/End */
        .grid-cs-#{$i} {
            grid-column-start: #{$i};
        }
        .grid-ce-#{$i} {
            grid-column-end: #{$i + 1};
        }

        /* Cell Row Start/End */
        .grid-rs-#{$i} {
            grid-row-start: #{$i};
        }
        .grid-re-#{$i} {
            grid-row-end: #{$i + 1};
        }
    }

    .grid-ce-end {
        grid-column-end: -1;
    }
    .grid-re-end {
        grid-row-end: -1;
    }
    .grid-ce-auto {
        grid-column-end: auto;
    }
    .grid-re-auto {
        grid-row-end: auto;
    }

    @include screen-below('sm') {
        --grid-template-column: repeat(1, minmax(0, 1fr));
    }
}