.toggle-icon-wrapper {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;

	&:before {
		content: "";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.toggle-icon {
		display: inline-block;
		height: 30px;
		position: relative;
		vertical-align: middle;
		width: 24px;
		> span {
			background: none repeat scroll 0 0 #000;
			bottom: 0;
			display: block;
			height: 2px;
			left: 0;
			margin: auto;
			position: absolute;
			right: 0;
			top: 0;
			width: 100%;
		}

		&:after,
		&:before {
			background-color: #000;
			content: "";
			height: 2px;
			left: 0;
			margin: auto;
			position: absolute;
			right: 0;
			width: 100%;
		}
		&:before {
			top: 20%;
			-webkit-transform-origin: top left;
			-moz-transform-origin: top left;
			-ms-transform-origin: top left;
			-o-transform-origin: top left;
			transform-origin: top left;
		}
		&:after {
			bottom: 20%;
			-webkit-transform-origin: bottom left;
			-moz-transform-origin: bottom left;
			-ms-transform-origin: bottom left;
			-o-transform-origin: bottom left;
			transform-origin: bottom left;
		}
	}
	+ span {
		vertical-align: middle;
		text-transform: uppercase;
	}

	&.in {
		.toggle-icon {
			span {
				opacity: 0;
			}
			&:before {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			&:after {
				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
		}
	}
}