@import (once) "flex";

@gridCellBaseSize: 8.33333333%;

.flex-grid {
    display: block;
    width: 100%;
}

.flex-grid {
    .row {
        .flexbox;
    }
}

.flex-grid {

    .row {
        .cell {
            .flex(0 0 @gridCellBaseSize);
        }

        &.cell-auto-size {
            .cell {
                .flex(1 1 auto);
            }
        }
    }

    .row {
        .cell {

            // colspan
            .generate-colspan(12);
            .generate-colspan(@j, @k: 2) when (@k =< @j){
                &.colspan@{k} {
                    .flex(0 0 @gridCellBaseSize * @k);
                }
                .generate-colspan(@j, (@k + 1));
            }

            // grow size
            .generate-flex-size(12);
            .generate-flex-size(@j, @k: 1) when (@k =< @j){
                &.size@{k} {
                    .flex(0 0 @gridCellBaseSize * @k);
                }
                .generate-flex-size(@j, (@k + 1));
            }

            // percent size
            .generate-flex-size-p(100);
            .generate-flex-size-p(@j, @k: 10) when (@k =< @j){
                &.size-p@{k} {
                    .flex(0 0 @k + 0%);
                }
                .generate-flex-size-p(@j, (@k + 10));
            }

            // pixels size
            .generate-flex-size-x(1000);
            .generate-flex-size-x(@j, @k: 100) when (@k =< @j){
                &.size-x@{k} {
                    .flex(0 0 @k + 0px);
                }
                .generate-flex-size-x(@j, (@k + 100));
            }

            &.auto-size {
                .flex(1 auto);
            }
        }
    }
}