@import (reference) "global";

@last-child-float: @opposite-direction;

.grid-row(@behavior: false) {
	.clearfix();
}

.grid-row(@behavior: false) when (@behavior=nest) {
	margin: 0 (-(@column-gutter/2));
	max-width: none;
	width: auto;
}

.grid-row(@behavior: false) when (@behavior=collapse) {
	margin: 0;
	max-width: @row-width;
	width: 100%;
}

.grid-row(@behavior: false) when (@behavior=nest-collapse) {
	margin: 0;
	max-width: none;
	width: auto;
}

.grid-row(@behavior: false) when (@behavior=false) {
	margin: 0 auto;
	max-width: @row-width;
	width: 100%;
}

.grid-column-collapse(@collapse:false) when (@collapse=false) {
	padding-left: (@column-gutter / 2);
	padding-right: (@column-gutter / 2);
}

.grid-column-collapse(@collapse:false) when (@collapse=true) {
	padding-left: 0;
	padding-right: 0;
}

.grid-last-column(@last-column) when (@last-column) {
	float: @opposite-direction;
}

.grid-column-columns(@columns,@last-column: false) {
	width: percentage(@columns / @total-columns);
	.grid-last-column(@last-column);
}

.grid-column-push(@push) {
	position: relative;
	@{default-float}: percentage(@push/@total-columns);
	@{opposite-direction}: auto;
}

.grid-column-pull(@pull) {
	position: relative;
	@{opposite-direction}: percentage(@pull/@total-columns);
	@{default-float}: auto;
}

.grid-column-center() {
	margin-@{default-float}: auto;
	margin-@{opposite-direction}: auto;
	float: none;
}

.grid-column-offset(@offset) {
	margin-@{default-float}: percentage(@offset/ @total-columns) !important;
}

.grid-html-classes(@size) {
	.mixin-loop-push-pull (@i) when (@i<@total-columns) {
		.@{size}-push-@{i} {
			.grid-column-push(@i);
		}
		.@{size}-pull-@{i} {
			.grid-column-pull(@i);
		}
		.mixin-loop-push-pull(@i+1);
	}
	.mixin-loop-push-pull(0);

	.column, .columns {
		position: relative;
		.grid-column-collapse(false);
		float: @default-float;
	}

	.mixin-loop-columns (@i) when (@i<=@total-columns) {
		.@{size}-@{i} {
			.grid-column-columns(@i, false);
		}
		.mixin-loop-columns(@i+1);
	}
	.mixin-loop-columns(1);

	.mixin-loop-column-offsets (@i) when (@i<@total-columns) {
		.@{size}-offset-@{i} {
			.grid-column-offset(@i);
		}
		.mixin-loop-column-offsets(@i+1);
	}
	.mixin-loop-column-offsets(0);

	.@{size}-reset-order {
		float: @default-float;
		left: auto;
		margin-@{default-float}: 0;
		margin-@{opposite-direction}: 0;
		right: auto;
	}

	.column.@{size}-centered,
	.columns.@{size}-centered {
		.grid-column-center();
	}

	.column.@{size}-uncentered,
	.columns.@{size}-uncentered {
		float: @default-float;
		margin-@{default-float}: 0;
		margin-@{opposite-direction}: 0;
	}

	.column.@{size}-centered:last-child,
	.columns.@{size}-centered:last-child {
		float: none;
	}

	.column.@{size}-uncentered:last-child,
	.columns.@{size}-uncentered:last-child {
		float: @default-float;
	}

	.column.@{size}-uncentered.opposite,
	.columns.@{size}-uncentered.opposite {
		float: @opposite-direction;
	}

	.row {
		&.@{size}-collapse {
			> .column,
			> .columns {
				.grid-column-collapse(true);
			}

			.row {
				margin-left: 0;
				margin-right: 0;
			}
		}
		&.@{size}-uncollapse {
			> .column,
			> .columns {
				.grid-column-collapse(false);
			}
		}
	}

}

.row {
	.grid-row(false);
	&.collapse {
		> .column,
		> .columns {
			.grid-column-collapse(true);
		}
		.row {
			margin-left: 0;
			margin-right: 0;
		}
	}

	.row {
		.grid-row(nest);
		&.collapse {
			.grid-row(nest-collapse);
		}
	}
}

.column,
.columns {
	.grid-column-columns(@total-columns, false);
	.grid-column-collapse(false);
	float: @default-float;
}

[class*="column"] + [class*="column"]:last-child {
	float: @last-child-float;
}

[class*="column"] + [class*="column"].end {
	float: @default-float;
}

@media @small-up {
	.grid-html-classes(small);
}

@media @medium-up {
	.grid-html-classes(medium);
}

@media @large-up {
	.grid-html-classes(large);
}

@media @xlarge-up{
	.grid-html-classes(xlarge)
}

.mixin-loop-base-push-pull (@i) when (@i<@total-columns) {
	.push-@{i} {
		.grid-column-push(@i);
	}
	.pull-@{i} {
		.grid-column-pull(@i);
	}
	.mixin-loop-base-push-pull(@i+1);
}

.mixin-loop-base-push-pull(0);
