/* Style Switcher */
#style-switcher {
	display: none;	
	width: 280px;
	position:fixed;
	top: 50%;
	margin-top: -160px;
	right: -240px;
	z-index: 9999;
	@extend .transition;
	@include translateZ(0);
	@include min-break($break-small) {
		display: block;
	}
	&.active {
		right: 0;
	}
	.style-toggle {
		float: left;
		width: 40px;
		height: 40px;
		border-top: 1px solid $color3;
		border-right: 1px solid $color3;
		border-bottom: 1px solid $color3;
		color: #fff;
		line-height: 36px;
		background: $color3;
		text-align: center;
		font-size: 20px;
		cursor: pointer;
		@include single-transition(all, 0.3s, ease-in-out);
		&.active {
			background: $color3;
			border-color: $color3;
			color: #fff;
		}
		i {
			vertical-align: middle;	
		}
	}
	h2 {
		display: block;
		float: right;
		width: 240px;
		padding: 0 20px;
		height: 40px;
		line-height: 42px;
		margin: 0;
		font-size: 13px;
		font-weight: 700;
		color: #fff;
		background: $color3;
	}
	.style-content {
		float: right;
		background: $color1;
		padding: 0;
		width: 240px;
		
		h3 {
			font-size: 14px;
			font-weight: 300;
			margin: 0 0 13px;
			float: left;
			color: #fff;
		}
		.section {
			padding: 15px 20px;
			border-bottom: 1px solid #3e3e3e;
			float: left;
			width: 100%;
		}
		p {
		  font-size: 13px;
		  color: #f2f2f2;
		  line-height: 1.3;
		  margin: 0;
		}
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			float: left;
			width: 100%;
			li {
				border: 0;
				display: block;
				float: left;
				&.block {
					clear: left;
					margin-bottom: 3px;
					
					a {
						margin-left: 0;
					}
				}
				a {
					display: block;
					float: left;
					font-size: 12px;
					color: #a9a9a9;
					border: 1px solid #5d5d5d;
					text-align: center;
					height: 30px;
					line-height: 30px;
					margin-left:4px;
					padding: 0 10px;
					&.active {
						border-color: $color3;
						background: $color3;
						color: #fff;
					}
					&:hover {
						border-color: #fff;	
					}
				}
				
				&:first-child {
					a {
						margin-left:0;
					}
				}
			}
		}
	}
}
#theme-switcher {
	position: fixed;
	bottom: 12px;
	left: 12px;
	border: 1px solid $color3;
	background: $color3;
	display: flex;
	align-items: center;
	text-align: center;
	
	width: 84px;
	height: 84px;
	cursor: pointer;
	z-index: 999;
	@extend .linear-quick-transition;
	&:hover {
		border-color: lighten($color3, 5%);	
		background: lighten($color3, 5%);
	}
	p {
		display: block;
		margin: 0;
		padding: 10px;
		width: 100%;
		color: #fff;
		font-size: 10px;
		line-height: 1.2;
		font-weight: 600;
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	}
	div {
		display: none;
		visibility: hidden;
		opacity: 0;
		position: relative;
		padding: 28px;
		width: 100%;
		height: 100%;
		.close {
			position: absolute;
			top: -15px;
			right: -15px;
			background: $color3;
			color: #fff;
			display: block;	
			width: 32px;
			height: 32px;
			line-height: 32px;
			text-align: center;
		}
		.theme {
			display: block;	
			
			&:last-of-type {
				margin-top: 1px;	
			}
			&:hover {
				opacity: 0.9;	
			}
		}
	}
	&.active {
		background: #fff;
		
		&:hover {
			border-color: $color3;	
			background: #fff;
		}
	}
}