.cx-switcher-wrap {
	width: 54px;
	height: 20px;
	position: relative;
	cursor: pointer;
	user-select: none;
	background-color: white;

	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;

	transform: translateZ(0);

	.bg-cover {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #eceeef;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
		pointer-events: none;
		border-radius: 25px;
		content: '';
		z-index: 1;
		transition: all 0.4s ease;
		transform: translateZ(0);
	}

	label {
		display: block;

		z-index: 2;

		span {
			font-size: 7px;
			line-height: 12px;
			text-transform: uppercase;
			color: #a4afb7;
			text-align: center;
			display: block;
			opacity: 1;
			transition: all 0.4s ease;
		}
	}

	.sw-enable {
		padding: 4px 4px 5px 12px;

		span {
			opacity: 0;
		}
	}

	.sw-disable {
		padding: 4px 12px 5px 4px;

		span {
			opacity: 1;
		}
	}

	.state-marker {
		background-color: white;
		display: block;
		position: absolute;
		width: 18px;
		height: 18px;
		margin: 1px;
		top: 0;
		left: 0;
		border-radius: 50%;
		transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
		box-sizing: border-box;
		z-index: 3;
	}

	.cx-input-switcher {
		display: none;
	}

	.cx-input-switcher-true:checked {

		~ .sw-enable{
			span{
				opacity: 1;
				color: white;
				text-shadow: 0 1px rgba(0, 0, 0, 0.2);
			}
		}

		~ .sw-disable{
			span{
				opacity: 0;
			}
		}

		~ .state-marker {
			left: 100%;
			margin-left: -19px;
		}

		~ .bg-cover {
			background-color: #49c66a;
		}
	}
}