%nav{:ontouchstart => true}
	%fieldset
		%input#checkbox{:type => "checkbox", :ontouchstart => true}
		%label{:for => "checkbox"} Show Detection Areas
%div.container{:ontouchstart => true}
	- (1..12).each do |i|
		%a
	%div
		%span

* { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
*, *:before, *:after {
	box-sizing: border-box;
	backface-visibility: visible;
	transform-style: preserve-3d;
	transition: all 500ms ease-in-out;
}
body, html { height: 100%; }

body {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	flex-flow: row wrap;
	perspective: 1000px;
	background: $mint;
	overflow: hidden;
}

nav {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	fieldset {
		border: 0;
		padding: 0;
		margin: 0 0 12px;
		input, label {
			cursor: pointer;
		}
		label {
			color: $forest;
			font-family: $font;
		}
	}
}

body > div {
	position: relative;
	transform: translateZ(0);
	a {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		z-index: 2;
		width: calc(100% / 3);
		height: calc(100% / 3);
		cursor: pointer;
		color: transparent;
		// background: rgba(white, .1);
		// border: 2px solid rgba(white, .5);
		// color: white;
		&:hover, &:focus {
			transform: translateZ(20px);
			~ div {
				span {
					transform: translateZ(20px);
				}
			}
		}
		&:active {
			outline: none;
			~ div {
				background: $green;
				span {
					transform: none;
				}
			}
		}
		&:nth-child(1) {
			top: 0;
			left: 0;
			&:after {
				content: "1";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: right bottom;
					transform: rotateX(5deg) rotateY(-5deg) translateZ(0);
				}
			}
		}
		&:nth-child(2) {
			top: 0;
			left: calc(100% / 3);
			&:after {
				content: "2";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: center bottom;
					transform: rotateX(5deg) translateZ(0);
				}
			}
		}
		&:nth-child(3) {
			top: 0;
			right: 0;
			&:after {
				content: "3";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: left bottom;
					transform: rotateX(5deg) rotateY(5deg) translateZ(0);
				}
			}
		}
		&:nth-child(4) {
			top: calc(100% / 3);
			left: 0;
			&:after {
				content: "4";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: right center;
					transform: rotateY(-5deg) translateZ(0);
				}
			}
		}
		&:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8) {
			width: calc(100% / 6);
			height: calc(100% / 6);
		}
		&:nth-child(5) {
			top: calc(100% / 3);
			left: calc(100% / 3);
			&:after {
				content: "5";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: right bottom;
					transform: rotateX(2.5deg) rotateY(-2.5deg) translateZ(0);
				}
			}
		}
		&:nth-child(6) {
			top: calc(100% / 3);
			left: calc(100% / 6 * 3);
			&:after {
				content: "6";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: left bottom;
					transform: rotateX(2.5deg) rotateY(2.5deg) translateZ(0);
				}
			}
		}
		&:nth-child(7) {
			top: calc(100% / 6 * 3);
			left: calc(100% / 3);
			&:after {
				content: "7";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: right top;
					transform: rotateX(-2.5deg) rotateY(-2.5deg) translateZ(0);
				}
			}
		}
		&:nth-child(8) {
			top: calc(100% / 6 * 3);
			left: calc(100% / 6 * 3);
			&:after {
				content: "8";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: left top;
					transform: rotateX(-2.5deg) rotateY(2.5deg) translateZ(0);
				}
			}
		}
		&:nth-child(9) {
			top: calc(100% / 3);
			right: 0;
			&:after {
				content: "9";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: left center;
					transform: rotateY(5deg) translateZ(0);
				}
			}
		}
		&:nth-child(10) {
			bottom: 0;
			left: 0;
			&:after {
				content: "10";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: right top;
					transform: rotateX(-5deg) rotateY(-5deg) translateZ(0);
				}
			}
		}
		&:nth-child(11) {
			bottom: 0;
			left: calc(100% / 3);
			&:after {
				content: "11";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: center top;
					transform: rotateX(-5deg) translateZ(0);
				}
			}
		}
		&:nth-child(12) {
			bottom: 0;
			right: 0;
			&:after {
				content: "12";
			}
			&:hover, &:focus {
				~ div {
					transform-origin: left top;
					transform: rotateX(-5deg) rotateY(5deg) translateZ(0);
				}
			}
		}
	}
	div {
		position: relative;
		z-index: 1;
		display: block;
		width: 360px;
		height: 256px;
		background: $pink;
		border-radius: 2px;
		padding: $padding;
		span {
			display: block;
			position: absolute;
			top: $padding;
			left: $padding;
			width: calc(100% - #{$padding*2});
			height: calc(100% - #{$padding*2});
			transform: translateZ(0);
			border-radius: 2px;
			border: 2px solid rgba(white, .75);
		}
	}
	&.borders {
		a {
			border: 2px solid rgba(white, .5);
		}
	}
}

$("#checkbox").click(function(){
	$(".container").toggleClass("borders");
});