@import "compass";

@function box-values($max: 30) {
	$values: null;

	@for $i from 1 through 4 {
		$values: append($values, unquote(random($max) + "px"), space);
	}

	@return unquote($values);
}

@mixin box-properties($dimensions: true) {
	$rand: random(20);

	border: solid gray;
	border-width: box-values($rand);

	$rand: random(30);

	margin: box-values($rand);
	padding: box-values($rand);

	@if $dimensions {
		$width: random(350);

		@if $width < 100 {
			$width: $width + 100;
		}

		$height: random(350);

		@if $height < 100 {
			$height: $height + 100;
		}

		width: unquote($width + "px");
		height: unquote($height + "px");
	}
}

// On complete
@include keyframes(complete) {
	from {
		background: #fff;
	}

	50% {
		background: rgba(#0f0, 0.5);
	}

	to {
		background: #fff;
	}
}

// On failing
@include keyframes(failing) {
	from {
		background: #fff;
	}

	50% {
		background: rgba(#f00, 0.5);
	}

	to {
		background: #fff;
	}
}

.complete {
	@include animation(complete 0.5s linear);
}

.failing {
	@include animation(failing 0.5s linear);
}

#flex-container, #flex-container * {
	margin: 0;
	padding: 0;
	border: 0;
	font: normal 12px/1 Arial;
	list-style: none;
}

#flex-container {
	top: 0;
	left: 0;
	position: fixed;
	opacity: 0.4;
	outline: 1px solid green;
	z-index: -1;
}

#flex-target {
	@include box-properties(false);

	width: 600px;
	height: 600px;

	vertical-align: top;
}

#flex-target.visible,
#flex-target div.visible {
	overflow: visible;
}

#flex-target.hidden,
#flex-target div.hidden {
	overflow: hidden;
}

#flex-target.width,
#flex-target div.width {
	width: auto;
}

#flex-target.height,
#flex-target div.height {
	height: auto;
}

#flex-target p {
	background: rgba(0, 0, 0, 0.5);
	color: white;
	border-color: rgba(gray, 0.5);
}

#flex-col-2, #flex-col-4, #flex-col-6 {
	p {
		float: left;
		width: 50%;
	}
}

$colors: #ccc, red, teal, purple, green, blue;
$i: 1;

@each $color in $colors {
	#flex-col-#{$i} {
		background: $color;
		@include box-properties;

		p {
			@include box-properties(false);
		}
	}

	$i: $i + 1;
}

