.switch {
	& {
		display: inline-block;
		vertical-align: middle;
		padding: 0;
		border: none;
		position: relative;
		outline: 0;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}
	input {
		opacity: 0;
		position: absolute;
		top: 9px;
		left: 10px;
		padding: 0;
	}
	label {
		& {
			color: transparent;
			background: $color-box-dark;
			display: block;
			margin-bottom: 1rem;
			position: relative;
			text-indent: 100%;
			width: $spacing*2.5;
			height: $spacing*1.3;
			cursor: pointer;
			transition: left 0.15s ease-out;
			border-radius: 100px;
		}
		&:after {
			width: $spacing;
			height: $spacing;
			padding-top: 4px;
			font-family: "fontawesome";
			text-indent: 0;
			content: "";
			text-align: center;
			color: $color-box-dark;
			display: block;
			background: $color-background;
			position: absolute;
			top: .2rem;
			left: .3rem;
			-webkit-transition: left 0.15s ease-out;
			-moz-transition: left 0.15s ease-out;
			-o-transition: translate3d(0, 0, 0);
			transition: left 0.15s ease-out;
			-webkit-transform: translate3d(0, 0, 0);
			-moz-transform: translate3d(0, 0, 0);
			-o-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			font-weight: normal;
			border-radius: 100px;
		}
	}
	input:checked + label {
		background: $color-ok;
	}
	input:checked + label:after {
		left: $spacing*1.3;
		color: $color-ok;
		content: "\f00c";
	}
	input + label {
		margin-left: 0;
		margin-right: 0;
	}
	input[type="checkbox"] + label, input[type="radio"] + label {
		display: inline-block;
		margin-left: $spacing/3;
		margin-right: $spacing/4;
		margin-bottom: 0;
		vertical-align: baseline;
	}

}