@import (once) "../../include/vars";

@gridCellBaseSize: 8.333335%;

:root {
    --grid-gap: 16px;
}

.grid {
    display: flex;
    flex-flow: column;
    position: relative;
}

.row {
    each(range(12), .(@v) {
        &.gap-@{v} {
            --grid-gap: unit(@v * 4, px);
        }
    })
}

.row {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    gap: var(--grid-gap);
    justify-content: flex-start;
    margin-right: calc(-1 * var(--grid-gap));
    container-type: inline-size;
    container-name: row;
    min-width: 100%;
}

.row + .row {
    margin-top: var(--grid-gap);
}

.row > * {
    position: relative;
    display: block;
    padding: 0;
    min-height: 1px;
    flex: 0 0 100%;
    max-width: calc(100% - var(--grid-gap));
}

.cell-auto, .col-auto, .v-cell-auto, .v-col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

each(range(0, 12), .(@k) {
    .cell-@{k}, .col-@{k} {
        flex: 0 0 calc(@gridCellBaseSize * @k - var(--grid-gap));
        max-width: calc(@gridCellBaseSize * @k - var(--grid-gap));
    }
    .offset-@{k} {
        margin-left: calc(@gridCellBaseSize * @k);
    }
})

each(@media-rules, {
    @container (width >= @value) {
        .cell-@{key}-half, .col-@{key}-half {
            flex: 0 0 50%;
            max-width: 50%;
        }

        .cell-@{key}-one-fifth,
        .col-@{key}-one-fifth {
            flex: 0 0 calc(20% - (var(--grid-gap)));
            max-width: calc(20% - (var(--grid-gap)));
        }

        .cell-@{key}-two-fifth,
        .col-@{key}-two-fifth {
            flex: 0 0 calc(40% - (var(--grid-gap)));
            max-width: calc(40% - (var(--grid-gap)));
        }

        .cell-@{key}-three-fifth,
        .col-@{key}-three-fifth {
            flex: 0 0 calc(60% - (var(--grid-gap)));
            max-width: calc(60% - (var(--grid-gap)));
        }

        .cell-@{key}-four-fifth, .col-@{key}-four-fifth {
            flex: 0 0 calc(80% - (var(--grid-gap)));
            max-width: calc(80% - (var(--grid-gap)));
        }

        .cell-@{key},
        .col-@{key} {
            flex-basis: 0;
            flex-grow: 1;
            max-width: 100%;
        }

        .cell-@{key}-auto,
        .col-@{key}-auto {
            flex: 0 0 auto;
            max-width: none;
        }

        each(range(1, 12), .(@k) {
            .cell-@{key}-@{k},
            .col-@{key}-@{k} {
                flex: 0 0 calc( @gridCellBaseSize * @k - var(--grid-gap) ) ;
                max-width: calc( @gridCellBaseSize * @k - var(--grid-gap) ) ;
            }
            .offset-@{key}-@{k} {
                margin-left: calc( @gridCellBaseSize * @k );
            }
        })
    }
})

.no-gap {
    --grid-gap: 0px;
}