=grid-classes
{
	/**
	 * The grid classes
	 */
	@for !i from 1 to !column-count
	{
		.columns-!i 		{ +span(!i); }
		.push-!i 			{ +push(!i); }
		.pull-!i 			{ +pull(!i); }
		.append-!i 			{ +append(!i); }
		.prepend-!i 		{ +prepend(!i); }
		.baseline-!i		{ height:#[!baseline * !i]px; }
		.baseline-up-!i		{ +baseline-up(!i); }
		.baseline-down-!i	{ +baseline-down(!i); }
	}
	
	#[Iteration::enumerate('.columns-', 1, !column-count)]
	{
		+columns-base;
	}
	
	.container
	{
		+container;
	}
	
	.first
	{
		+first;
	}
	
	.last
	{
		+last;
	}
}

/**
* Container
*
* Makes an element behave as a container. Defaults
* to the total width of the grid.
*
* @type Mixin
* @param !container-width The width of the container
*/
=container(!container-width = !grid-width)
{
	+clearfix;
	
	width:!container-width;
	margin:0 auto;
	position:relative;
}

/**
 * Baseline
 */

=baseline-up(!n)
{
	top:#[-(!baseline * !n)]px;
}

=baseline-down(!n)
{
	top:#[!baseline * !n]px;
}

=baseline(!n)
{
	height:#[!baseline * !n]px;
}

/**
 * Span a certain number of columns
 * @param !number The number of columns
 */
=span(!n)
{
	width:#[(!n * !column-width) + ((!n * !gutter-width) - !gutter-width)]px;
}

/**
 * Columns
 *
 * Makes the element behave as a column.
 * @param !number The number of columns
 */
=columns(!n)
{
	+span(!n);
	+columns-base;
}

=columns-base
{
	position:relative;
	float:left;
	margin-right:!right-gutter-width;
	margin-left:!left-gutter-width;	
}

=first
{
	margin-left:0 !important;
}

=last
{
	margin-right:0 !important;
}

/**
* Layout Utilities
*
* Various layout utilities for manipulating columns
*/

=append(!n)
{
	padding-right:#[(!column-width + !gutter-width) * !n]px;
}

=prepend(!n)
{
	padding-left:#[(!column-width + !gutter-width) * !n]px;
}

=pull(!n)
{
	left:#[-((!column-width + !gutter-width) * !n)]px;
	margin-right:#[-((!column-width + !gutter-width) * !n - !gutter-width)]px !important;
}

=push(!n)
{
	left:#[(!column-width + !gutter-width) * !n]px;
	margin-right:#[(!column-width + !gutter-width) * !n + !gutter-width]px !important;
}

