// The form toggle
input[type="checkbox"] {
	background: red;
	display: none;

	&:checked + label {
	
		&:after {
			background-color: #2a7bfc;
			box-shadow: 0 0 4px 1px rgba(42,123,252,0.1);
			transform: translate(16px, -50%);
		}

		&:before {
			background-color: #b7d3ff;
			box-shadow: 0 0 4px 2px rgba(183,211,255,0.2);
		}
	}

	+ label {
		cursor: pointer;
		margin-left: 50px;
		position: relative;

		&:after,
		&:before {
			content: '';
			position: absolute;
		}

		&:after {
			background-color: #777;
			border-radius: 50%;
			box-shadow: 0 0 4px 1px rgba(0,0,0,0.1);
			height: 20px;
			left: -48px;
			top: 50%;
			transform: translate(0, -50%);
			transition: all 100ms ease-in-out;
			width: 20px;
		}

		&:before {
			background-color: #ccc;
			border-radius: 5px;
			height: 10px;
			left: -50px;
			top: 50%;
			transform: translateY(-50%);
			width: 40px;
		}
	}
}