@if luiTheme(element, field, switch, enabled) {
	@at-root #{$namespace} {
		$vars: luiTheme(element, field, switch);

		#{$prefix}.switch.input {
			display: inline-block;
			vertical-align: middle;
			position: relative;
			width: map-gets($vars, width);
			height: map-gets($vars, height);

			input {
				position: absolute; top: 0; bottom: 0; right: 0; left: 0;
				z-index: 3;
				width: 100%;
				height: 100%;
				cursor: pointer;
				opacity: 0;
				margin: 0;
			}

			label {
				display: block;
				width: 100%;
				height: 100%;
				position: relative;
				background: map-gets($vars, background);
				color: map-gets($vars, color);
				text-overflow: clip;
				@include lui_transition();
				@include lui_make_icon("check", left);
				@include lui_make_icon("cross", right);

				&:before, &:after {
					display: block;
					position: absolute;
					top: 50%;
					-ms-transform: translateY(-50%);
					transform: translateY(-50%);
					z-index: 1;
				}

				&:before { left: 0.5em; }

				&:after { right: 0.5em; }

				span {
					background: #fff;
					display: block;
					position: absolute;
					top: 0; bottom: 0; left: 0.5em; right: 0;
					height: 1.5em; width: 1.5em;
					margin: auto 0;
					z-index: 2;
					@include lui_transition();

					&:before {
						position: absolute;
						top: 0; bottom: 0; left: 0; right: 0;
						content: '';
						display: block;
						height: 50%;
						width: 0.1em;
						background: map-gets($vars, grab-lines-color);
						box-shadow: -0.2em 0 0 0 map-gets($vars, grab-lines-color), 0.2em 0 0 0 map-gets($vars, grab-lines-color);
						margin: auto;
						@include lui_transition();
					}
				}
			}

			input:checked ~ label {
				background: map-gets($vars, active-background);
				color: map-gets($vars, active-color);
			}

			input:checked ~ label span {
				left: 2.1em;
			}
		}
	}
}