/////////////////////
// toggle controls
/////////////////////
.customize-control-toggle {
	input[type="checkbox"] {
		display: none;
	}
	.switch {
		border: 1px solid rgba(0,0,0,.1);
		display: inline-block;
		width: 35px;
		height: 12px;
		border-radius: 8px;
		background: #ccc;
		vertical-align: middle;
		position: relative;
		cursor: pointer;
		user-select: none;
		transition: background 350ms ease;
		&:before,
		&:after {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: -3px;
			transition: all 350ms cubic-bezier(0,.95,.38,.98),
			background 150ms ease;
		}
		&:before {
			background: rgba(0,0,0,.2);
			transform: translate3d(0, -50%, 0) scale(0);
		}
		&:after {
			background: #999;
			border: 1px solid rgba(0,0,0,.1);
			transform: translate3d(0, -50%, 0);
		}
		&:active {
			&:before {
				transform: translate3d(0, -50%, 0) scale(3);
			}
		}
	}
	input:checked + .switch {
		background: rgba(#3498DE,.3);
		&:before {
			background: rgba(#3498DE, 0.075);
			transform: translate3d(100%, -50%, 0) scale(1);
		}
		&:after {
			background: #3498DE;
			transform: translate3d(100%, -50%, 0);
		}
		&:active {
			&:before {
				background: rgba(#3498DE, 0.075);
				transform: translate3d(100%, -50%, 0) scale(3);
			}
		}
	}

	.customize-control-title {
		width: calc(100% - 50px);
		float: left;
	}
}