input[type=checkbox]{
	visibility: hidden;
	height: 0;
	width: 0;
}

label {
  border: 1px solid var(--tertiary);
	position: relative;
	display: block;
	cursor: pointer;
	width: 100px;
	height: 50px;
	background: var(--quartenary);
	border-radius: 100px;
	text-indent: -9999px;
}

label:after {
	content: '';
	width: 40px;
	height: 40px;
	position: absolute;
	top: 5px;
	left: 5px;
	background: var(--quintary);
	border-radius: 40px;
  filter: drop-shadow(0 0 1px #000c);
	transition: .3s;
}

input:checked + label {
	background: var(--primary);
}

input:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

label:active:after {
	width: 65px;
}