// http://codepen.io/batazor/pen/KwKryj

.switch
	display: inline-block;
	position: relative;
	width: 40px;
	height: 8px;
	border-radius: 10.416666666666668px;
	background: #E0E0E0;
	-webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	vertical-align: middle;
	cursor: pointer;

.switch::before
	content: '';
	position: absolute;
	top: -8.604166666666667px;
	left: -2.604166666666667px;
	width: 26.04166666666667px;
	height: 26.04166666666667px;
	background: #bdbdbd;
	border-radius: 50%;
	-webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);

switch:active::before
	box-shadow: 0 2px 10.416666666666668px rgba(0, 0, 0, 0.28), 0 0 0 25px rgba(0, 0, 0, 0.1);

switch:active::before
	box-shadow: 0 2px 10.416666666666668px rgba(0, 0, 0, 0.28), 0 0 0 25px rgba(0, 0, 0, 0.1);

input:checked + .switch
	background: rgba(0, 150, 136, 0.5);
	background: rgba(102, 187, 106, 0.5);

input:checked + .switch::before
	left: 20.562499999999996px;
	background: #009688;
	background: #66bb6a;

input:checked + .switch:active::before
	box-shadow: 0 2px 10.416666666666668px rgba(0, 0, 0, 0.28), 0 0 0 25px rgba(0, 150, 136, 0.2);