// ------------------------------------------
// BLOCK GRID with MARGIN
//   *Deprecated* since v 0.1, use block-grid instead
//   Using margin for distance between block
// ------------------------------------------
$block-grid-max-width : em($content-width) !default;
$block-grid-total     : 12 !default;
$block-grid-margin    : em(25px) !default;

// Calculate percentages for block-grid
@function blockGridCalc($blockNum, $totalBlock:$block-grid-total, $collapse:false) {
	$baseSize : 100% / $blockNum;

	// Reduce size due to margin between grid.
	$fillSize : 0 !default;
	@if $collapse == false { // -2% / 4
		$fillSize : ( gridMarginCalc() * ( $blockNum - 1 ) / $blockNum );
	}
	
	@return $baseSize - $fillSize;
}

// Calculate percentages for Margin between block-grid
@function blockGridMarginCalc($blockMargin: $block-grid-margin, $maxWidth: $block-grid-max-width) {
	@return percentage( $blockMargin / $maxWidth );
}

@mixin block-grid($block-num : false,
				$spacing     : $block-grid-margin,
				$base-style  : true,
				$collapse    : false) {

	@if $base-style {
		display : block;
		padding : 0;
		@include clearfix;

		&> li {
			display : block;
			height  : auto;
			float   : $default-float;
			@if $collapse == false {
				margin-#{$default-opposite} : blockGridMarginCalc($spacing);
			} @else {
				margin-#{$default-opposite} : 0;
			}
		}
	}

	@if $block-num {
		&>li {
			width   : blockGridCalc($block-num, $collapse: $collapse);
			@if $collapse == false {
				&:nth-of-type(#{$block-num}n) {
					margin-#{$default-opposite} : 0;
				}
			}
			
			// &:nth-of-type(#{$block-num}n+1) {
			// 	clear: both;
			// }
		}
	}
}

@if $include-block-grid {

/* ---------------
EDGE Block Grid
--------------- */

[class*="block-grid-"] { @include block-grid; }

// Large block grid
@for $i from 2 through $block-grid-total {
	.large-block-grid-#{($i)} {
		@include block-grid($i, $for-base: false);

		&.collapse {
			@include block-grid($i, $for-base: false, $collapse: true);
		}
	}
}

@include small {
	[class*="small-block-grid-"] > li { clear: none !important; }
	
	// Make large-block-grid 100% width
	[class*="large-block-grid-"] > li {
		width: 100%;
		
		// Reset large-block-grid nth-child margin
		&:nth-child(n+1) {
			margin-#{$default-opposite} : blockGridMarginCalc($block-grid-margin);
		}
	}

	// Small block grid
	@for $i from 2 through $block-grid-total {
		.small-block-grid-#{($i)} {
			@include block-grid($i, $base-style: false);
			&.collapse {
				@include block-grid($i, $base-style: false, $collapse: true);
			}
		}
	}
}

// Base style for collapsed block-grid, written below to override other style
[class*="block-grid-"].collapse { @include block-grid($collapse: true); }

}