// Grid global defaults
@total-columns: 12;
@column-width: 100 / @total-columns; // calculates individual column width based off of # of columns
@column-margin: 4%; // space between columns


/*
* Less variables should be separated by a semicolon. Example of correct usage:
* .grid-column(1;3;4%) for a one-third column with 4% margins.
*
* @n - Numeric. How many columns this grid column should span, by default out of twelve,
* @total - Numeric. How many columns the grid row should have in total.
* @margin - Percentage. Column gutters.
*/
.grid-column(@n; @total: @total-columns; @margin: @column-margin) {
	width: (100 / @total) * @n - @margin;
	margin-left: @margin/2;
	margin-right: @margin/2;
	float: left;
	box-sizing: border-box;
}

.grid-column-reset() {
	width: auto;
	margin-left: 0;
	margin-right: 0;
	float: none;
}

/*
* .grid-row() is used to correct margins for the grid and includes a clearfix.
* Call this on elements that will contain .grid-column();
*
* @margin - Matches the global page margin - in our case, 15px.
*/

.grid-row(@margin: 15px) {
	width: calc(~'100% + 30px');
	margin: 0 -@margin;
	//alternative for clearfix is to float this element too
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

/*
* .push() and .pull() are to be used in conjunction with .grid-column().
* Note that they must be used AFTER .grid-column() for heritance to work properly,
* as .grid-column() will also set a margin.
*/

.push(@offset:1; @total: @total-columns; @margin: @column-margin) {
	margin-left: (@margin/2) + (@offset * 100/@total) * 1%;
}
.pull(@offset:1; @total: @total-columns; @margin: @column-margin) {
	margin-right: (@margin/2) + (@offset * 100/@total) * 1%;
}