@function sqrt($r) {
  $x0: 1;
  $x1: $x0;
 
  @for $i from 1 through 10 {
    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
    $x0: $x1;
  }
 
  @return $x1;
}

$disabledColor: #efefef;
$sizeWidth: 104px;
$border: 1px;
$sizeHeight: $sizeWidth/sqrt(3);

html, body{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
body{
	background-color: #333;
}
.hex {
	float: left;
	margin-left: 3px;
	margin-bottom: -26px;
	
	.top {
		width: 0;
		border-bottom: $sizeHeight/2  solid #6C6;
		border-left: $sizeWidth/2  solid transparent;
		border-right: $sizeWidth/2  solid transparent;
	}
	.middle {
		width: $sizeWidth;
		height: $sizeHeight;
		background: #6C6;
	}
	.bottom {
		width: 0;
		border-top: $sizeHeight/2 solid #6C6;
		border-left: $sizeWidth/2 solid transparent;
		border-right: $sizeWidth/2 solid transparent;
	}

	&.disabled{
		.top{
			@extend .top;
			border-bottom-color: $disabledColor; 

		}
		.middle{
			background: $disabledColor; 
		}
		.bottom{
			border-top-color: $disabledColor; 
		}
	}
	&-row{
		clear: left;
		&.even {
			margin-left: ($sizeWidth/2)+1;
		}
	}

	
}