/////////////////////
// switch controls
/////////////////////
.customize-control-switch {
	input[type="checkbox"] {
		display: none;
	}
	.switch {
		border: none;
		margin-bottom: 1.5rem;
		outline: 0;
		padding: 0;
		position: relative;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		label {
			background: rgba(0,0,0,.2);
			color: transparent;
			cursor: pointer;
			display: block;
			margin-bottom: 1rem;
			position: relative;
			transition: left 0.15s ease-out;
			height: 2rem;
		    width: 4rem;
		    font-family: Monaco, "Lucida Sans Typewriter", "Lucida Typewriter", "Courier New", Courier, monospace;
			&:after {
				background: #FFFFFF;
				content: "";
				display: block;
				height: 1.5rem;
				left: .25rem;
				position: absolute;
				top: .25rem;
				width: 1.5rem;
				-webkit-transition: all .25s ease-in-out;
				-moz-transition: all .25s ease-in-out;
				-ms-transition: all .25s ease-in-out;
				-o-transition: all .25s ease-in-out;
				transition: all .25s ease-in-out;
			}
		}
		input {
			left: 10px;
			opacity: 0;
			padding: 0;
			position: absolute;
			top: 9px;
			+ label {
				margin-left: 0;
				margin-right: 0;
			}
			&:checked {
				+ label {
					background: #3498DB;
					&:after {
						left: 2.25rem;
						background: #ffffff;
					}
				}
			}
		}
		&.round {
			border-radius: 1000px;
			label {
				border-radius: 2rem;
				&:after {
					border-radius: 2rem;
				}
			}
		}
	}
	.switch-on,
	.switch-off {
		line-height: 32px;
		font-weight: bold;
		padding: 0 10px;
	}
	.switch-on {
		color: #fff;
		padding-right: 5px;
	}
	.switch-off {
		color: #777;
		padding-left: 5px;
	}
}
