// --------------------------------------------------
// reflex grid
// --------------------------------------------------

.@{reflex-prefix}grid {
    .display-flex();
    .flex-wrap();
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    max-width: @reflex-max-width;

    .setupWhitespace();

    &::before,
    &::after {
        .resetWhitespace();
        max-width: 100%;
    }

    *::before,
    *::after {
        .resetWhitespace();
    }

    // handle nested grids
    & .@{reflex-prefix}grid {
        .flex(1, 1, auto);
    }

    // Reset the box-sizing so our grid works properly
    * {
        .box-sizing(border-box);
    }
    *::before,
    *::after {
        .box-sizing(border-box);
    }

    // handle when lists are used as a grid
    list-style-type: none;

    // Handle div's placed directly in the grid that misses a grid class, but have a js- container prefix
    > div[class*="js-"]:not([class*="grid"]) {
        width: 100%;
    }
}

// --------------------------------------------------
// reflex grid__col defaults
// --------------------------------------------------

[class*="@{reflex-prefix}grid__col-"] {
    .setupCols();
}

// --------------------------------------------------
// reflex grid__cell defaults
// --------------------------------------------------

.@{reflex-prefix}grid__cell {
    position: relative;
    display: block;
    .flex(1, 1, auto);
}

.@{reflex-prefix}grid__cell--full {
    height: 100%;
    width: 100%;
}

// ie11 hack - Does not work properly...
/*_:-ms-fullscreen, :root .grid__cell {
    width: 100%;
}*/

// --------------------------------------------------
// reflex grid generation
// --------------------------------------------------

.make-reflex-grid(grid__col-);
//grid__col-@{i}-auto
.generateAutoColumns(grid__col-, @reflex-columns);

@media (min-width: @reflex-xs) {
    .make-reflex-grid(grid__col-xs-);
    .generateAutoColumns(grid__col-xs-, @reflex-columns);
}

@media (min-width: @reflex-sm) {
    .make-reflex-grid(grid__col-sm-);
    .generateAutoColumns(grid__col-sm-, @reflex-columns);
}

@media (min-width: @reflex-md) {
    .make-reflex-grid(grid__col-md-);
    .generateAutoColumns(grid__col-md-, @reflex-columns);
}

@media (min-width: @reflex-lg) {
    .make-reflex-grid(grid__col-lg-);
    .generateAutoColumns(grid__col-lg-, @reflex-columns);
}

@media (min-width: @reflex-xlg) {
    .make-reflex-grid(grid__col-xlg-);
    .generateAutoColumns(grid__col-xlg-, @reflex-columns);
}


// --------------------------------------------------
// reflex grid__col-auto
// --------------------------------------------------

.@{reflex-prefix}grid__col-auto {
    .setupAutoCols();
}

.@{reflex-prefix}grid__col-auto-width {
    -ms-flex: auto auto auto;
    -webkit-flex: auto auto auto;
    flex: auto auto auto;
    width: auto;
}

@media (min-width: @reflex-xs) {
    .@{reflex-prefix}grid__col-xs-auto {
        .setupAutoCols();
    }

    .@{reflex-prefix}grid__col-xs-auto-width {
        -ms-flex: auto auto auto;
        -webkit-flex: auto auto auto;
        flex: auto auto auto;
        width: auto;
    }
}

@media (min-width: @reflex-sm) {
    .@{reflex-prefix}grid__col-sm-auto {
        .setupAutoCols();
    }

    .@{reflex-prefix}grid__col-sm-auto-width {
        -ms-flex: auto auto auto;
        -webkit-flex: auto auto auto;
        flex: auto auto auto;
        width: auto;
    }
}

@media (min-width: @reflex-md) {
    .@{reflex-prefix}grid__col-md-auto {
        .setupAutoCols();
    }

    .@{reflex-prefix}grid__col-md-auto-width {
        -ms-flex: auto auto auto;
        -webkit-flex: auto auto auto;
        flex: auto auto auto;
        width: auto;
    }
}

@media (min-width: @reflex-lg) {
    .@{reflex-prefix}grid__col-lg-auto {
        .setupAutoCols();
    }

    .@{reflex-prefix}grid__col-lg-auto-width {
        -ms-flex: auto auto auto;
        -webkit-flex: auto auto auto;
        flex: auto auto auto;
        width: auto;
    }
}

@media (min-width: @reflex-xlg) {
    .@{reflex-prefix}grid__col-xlg-auto {
        .setupAutoCols();
    }

    .@{reflex-prefix}grid__col-xlg-auto-width {
        -ms-flex: auto auto auto;
        -webkit-flex: auto auto auto;
        flex: auto auto auto;
        width: auto;
    }
}

// --------------------------------------------------
// reflex order helpers generation
// --------------------------------------------------

.make-grid--order-helpers();

@media only screen and (min-width: @reflex-xs) {
    .loop-grid--order-helpers(@reflex-columns, ~'-xs');
}

@media only screen and (min-width: @reflex-sm) {
    .loop-grid--order-helpers(@reflex-columns, ~'-sm');
}

@media only screen and (min-width: @reflex-md) {
    .loop-grid--order-helpers(@reflex-columns, ~'-md');
}

@media only screen and (min-width: @reflex-lg) {
    .loop-grid--order-helpers(@reflex-columns, ~'-lg');
}

@media only screen and (min-width: @reflex-xlg) {
    .loop-grid--order-helpers(@reflex-columns, ~'-xlg');
}
