css toggle with input type checkbox

toggle.html

<p>
  option 1 
  <label class="switch">
    <input type="checkbox">
    <div class="slider"></div>
  </label>
  option 2
</p>

toggle.less

.switch {
	position: relative;
	display: inline-block;
	width: 32px;
	height: 16px;
	margin: 0 10px;
	top: 3px;

	input {display:none;}

	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ccc;
		border-radius: 14px;
		transition: .4s;

		&:before {
			position: absolute;
			content: "";
			height: 14px;
			width: 14px;
			left: 1px;
			bottom: 1px;
			background-color: @brand-black;
			border-radius: 50%;
			transition: .4s;
		}
	}

	input:checked + .slider {
		background-color: @brand-black;
		&:before {
			background-color: #ccc;
		}
	}

	input:focus + .slider {
		box-shadow: 0 0 1px @brand-black;
	}

	input:checked + .slider:before {
		transform: translateX(16px);
	}
}