.switch {
	position: relative;
	margin-bottom: 0;
	outline: 0;
	font-size: rem-calc(14);
	font-weight: bold;
	color: #fefefe;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	height: 2rem;
}

.switch-input {
	position: absolute;
	margin-bottom: 0;
	opacity: 0;
}

.switch-paddle {
	position: relative;
	display: inline-block !important;
	width: 4rem;
	height: 2rem;
	border-radius: 0;
	background: #cacaca;
	-webkit-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
	font-weight: inherit;
	color: inherit;
	cursor: pointer;
}

input + .switch-paddle {
	margin: 0;
}

.switch-paddle::after {
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	-webkit-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
	border-radius: 0;
	background: #fefefe;
	-webkit-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
	content: '';
}

input:checked ~ .switch-paddle {
	background: #0080a4;
}

input:checked ~ .switch-paddle::after {
	left: 2.25rem;
}

input:disabled ~ .switch-paddle {
	cursor: not-allowed !important;
	opacity: 0.5;
}

input:focus ~ .switch-paddle {
	outline: 0;
}

.switch-active, .switch-inactive {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}

.switch-active {
	left: 8%;
	display: none;
}

input:checked + label > .switch-active {
	display: block;
}

.switch-inactive {
	right: 15%;
}

input:checked + label > .switch-inactive {
	display: none;
}

.switch.tiny {
	height: 1.5rem;
}

.switch.tiny .switch-paddle {
	width: 3rem;
	height: 1.5rem;
	font-size: rem-calc(10);
}

.switch.tiny .switch-paddle::after {
	top: 0.25rem;
	left: 0.25rem;
	width: 1rem;
	height: 1rem;
}

.switch.tiny input:checked ~ .switch-paddle::after {
	left: 1.75rem;
}

.switch.small {
	height: 1.75rem;
}

.switch.small .switch-paddle {
	width: 3.5rem;
	height: 1.75rem;
	font-size: rem-calc(12);
}

.switch.small .switch-paddle::after {
	top: 0.25rem;
	left: 0.25rem;
	width: 1.25rem;
	height: 1.25rem;
}

.switch.small input:checked ~ .switch-paddle::after {
	left: 2rem;
}

.switch.large {
	height: 2.5rem;
}

.switch.large .switch-paddle {
	width: 5rem;
	height: 2.5rem;
	font-size: rem-calc(16);
}

.switch.large .switch-paddle::after {
	top: 0.25rem;
	left: 0.25rem;
	width: 2rem;
	height: 2rem;
}

.switch.large input:checked ~ .switch-paddle::after {
	left: 2.75rem;
}