.toggleWrapper {
	position: relative;
	overflow: hidden;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}
.toggleWrapper input {
	position: relative;
	left: -99em;
}
.toggle {
	@extend .mb-0;
	cursor: pointer;
	position: relative;
	width: 82px;
	height: 22px;
	background: $form-focus-color;
	border-radius: 19px;
	-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
	transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
	&__handler {
		display: inline-block;
		position: relative;
		z-index: 1;
		background: #fff;
		width: 20px;
		height: 20px;
		border-radius: 19px;
		top: 1px;
		left: 1px;
		-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
		transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}
}
.toggle:before,
.toggle:after {
	position: absolute;
	line-height: 33px;
	font-size: 16px;
	z-index: 2;
	-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
	transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.toggle:before {
	content: "";
	left: 16px;
	color: $form-color-typed-value;
}
.toggle:after{
	content: "";
	right: 21px;
	color: #fff;
}

input:checked + .toggle {
	background: $form-focus-color;
}
input:checked + .toggle:before {
	color: #fff;
}
input:checked + .toggle:after {
	color: $form-color-typed-value;
}
input:checked + .toggle .toggle__handler {
	width: 20px;
	-webkit-transform: translateX(60px);
	transform: translateX(60px);
	border-color: #fff;
}