/* variables */
$color: #4504fe;
$dots-size: 5px;
$dots-gutter: 5px;








@import "compass";
@import "bourbon";

.dots-wrapper {
	width: ($dots-size*3) + ($dots-gutter*2);
	height: ($dots-size*3) + ($dots-gutter*2);
	top: 50%;
	left: 50%;
	position: absolute;
	@include transform(translate(-50%, -50%));
}

.dots-menu {
	cursor: pointer;
	@include transform-origin(center);
	@include clearfix();
	@include transition(all 0.3s $ease-in-back);
	> span {
		@include transition(all 0.3s 0.4s $ease-in-out-quint);
		@include transform-origin(center);
		content: '';
		display: block;
		width: $dots-size;
		height: $dots-size;
		background-color: $color;
		float: left;
		&:nth-of-type(3n+1) {
			clear: left;
		}
		&:nth-of-type(5) {
			margin: $dots-gutter;
			@include transition-delay(0.2s);
			&:before,
			&:after {
				@include transform(translate(-50%, -50%));
				@include transition(all 0.2s 0.2s $ease-in-out-quint);
				position: absolute;
				content: '';
				display: block;
				left: 50%;
				top: 50%;
				width: $dots-size;
				height: $dots-size;
				background-color: $color;
				z-index: 2;
			}
		}
		&:nth-of-type(1n),
		&:nth-of-type(6) {
			margin: $dots-gutter 0 0;
		}
		&:nth-of-type(5) {
			margin: $dots-gutter;
		}
		&:first-of-type,
		&:nth-of-type(3),
		&:nth-of-type(7),
		&:nth-of-type(9) {
			margin: 0;
		}
		&:nth-of-type(2),
		&:nth-of-type(8) {
			margin: 0 $dots-gutter;
		}
	}
	body.site-toggled &,
	&:hover {
		> span {
			&:nth-of-type(2),
			&:nth-of-type(4),
			&:nth-of-type(6),
			&:nth-of-type(8) {
				@include transform(rotateY(180deg));
				opacity: 0;
			}
			&:nth-of-type(1),
			&:nth-of-type(3),
			&:nth-of-type(7),
			&:nth-of-type(9) {
				@include transform(rotateX(180deg));
				opacity: 0;
			}
			&:nth-of-type(5) {
				background-color: transparent;
			}
			&:nth-of-type(5):before {
				width: 100%;
				height: $dots-size;
			}
			&:nth-of-type(5):after {
				height: 100%;
				width: $dots-size;
			}
		}
	}
	body.site-toggled & {
		@include transform(rotate(-45deg));
		>span:nth-of-type(5) {
			background-color: transparent;
		}
		>span:nth-of-type(5):before {
			height: $dots-size/4;
			min-height: 3px;
		}
		>span:nth-of-type(5):after {
			width: $dots-size/4;
			min-width: 3px;
		}
	}
}


/* not important */

body {
	background-color: #FFF;
	@include transition(all 0.3s ease);
}

body.site-toggled {
	background-color: darken(#FFF, 5);
}