@charset "UTF-8";
/* CSS Document */
@import "compass";

/* common */

.grid-icon {
	display: inline-block;
	margin: 2vw;
}

.grid-icon:hover > span > span {
	opacity: .8;
}

.grid-icon > .layer {
	width: 100%;
	position: absolute;
	left: 0;
}

/* style */

.grid-icon--fill {
	position: relative;
	width: 26px;
	height: 26px;
}

.grid-icon--fill > .layer {
	width: 100%;
	height: 6px;
}

.grid-icon--fill > .layer--primary {
	top: 0;
}

.grid-icon--fill > .layer--secondary {
	top: 50%;
	margin-top: -3px;
}

.grid-icon--fill > .layer--tertiary {
	bottom: 0;
}

.grid-icon--fill > .layer > span {
	position: absolute;
	display: block;
	width: 6px;
	height: 100%;
	background-color: #fff;
}

.grid-icon--fill > .layer > span {
	left: 50%;
	margin-left: -3px;
}

.grid-icon--fill > .layer > span:before {
	display: block;
	content: "";
	width: 6px;
	height: 100%;
	background-color: #fff;
	left: -10px;
	position: absolute;
}

.grid-icon--fill > .layer > span:after {
	display: block;
	content: "";
	width: 6px;
	height: 100%;
	background-color: #fff;
	right: -10px;
	position: absolute;
}