@import 'mixins';

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

.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
    & .grid {
        .flex(1, 1, auto);
    }

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

	&.demo {
		> div {
			border: 1px solid #aaa;
			background-color: #CCC;

			margin-bottom: 10px;
		}
	}
}


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

.col{
    .setupCols();
}

.with-margin {
	margin: @reflex-grid-spacing;
}

.col(@x, @withMargin: false, @gutter: @reflex-grid-spacing) {
	.col;
	.colCalc(@x, @withMargin, @gutter);
}

.colCalc(@x, @withMargin: false, @gutter: @reflex-grid-spacing){
    @w: 100% * (@x/@reflex-columns);
        
    & when (@withMargin = true) {
        @extraMargin: @gutter * 2 * (@x/@reflex-columns);
        @margin: @gutter * 2  - @extraMargin;
        width: calc(@w ~"-" @margin);
        margin: 0 @gutter 0 @gutter;

        &:first-of-type {
            margin-left: 0;
        }

        &:last-of-type {
            margin-right: 0;
        }

        & when (@x = 12) {
            &:first-of-type {
                margin-left: 0;
                margin-right: 0;
            }

            &:last-of-type {
                margin-left: 0;
                margin-right: 0;
            }
        }
    }

    & when (@withMargin = false) {
        width: @w;
    }
}

// TKG: custom mixin that I added in case you have a dynamic grid system that can span multiple rows
.rows(@x, @withMargin: false, @gutter: @reflex-grid-spacing) {
    .col(@x, @withMargin, @gutter);

    @n: @reflex-columns/@x;

    &:nth-child(@{n}n+1) {
        margin-left: 0;
    }

    &:nth-child(@{n}n+@{n}) {
        margin-right: 0;
    }
}

// --------------------------------------------------
// Setup column classes from mixin.
// --------------------------------------------------
.colLoop(@column) when (@column > 0){
	.col-@{column}{
		&:extend(.col);
		.colCalc(@column, false);
	}

	.col-@{column}-margin{
		&:extend(.col);
		.colCalc(@column, true);
	}

	.colLoop(@column - 1);
}
//
.colLoop(@reflex-columns);


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

.grid__cell {
    display: block;
    .flex(1, 1, auto);
}

// ie11 hack
_:-ms-fullscreen, :root .grid__cell {
    width: 100%;
}

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

//.make-reflex-grid(col-);
//
//@media (min-width: @reflex-xs) {
//    .make-reflex-grid(grid__col-xs-);
//}
//
//@media (min-width: @reflex-sm) {
//    .make-reflex-grid(grid__col-sm-);
//}
//
//@media (min-width: @reflex-md) {
//    .make-reflex-grid(grid__col-md-);
//}
//
//@media (min-width: @reflex-lg) {
//    .make-reflex-grid(grid__col-lg-);
//}
//
//@media (min-width: @reflex-xlg) {
//    .make-reflex-grid(grid__col-xlg-);
//}


// --------------------------------------------------
// reflex grid__col-auto
// --------------------------------------------------
.col-auto{
	.setupAutoCols();
}
.grid__col-auto {
    .setupAutoCols();
}

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

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

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

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

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

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

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