@if luiTheme(element, field, enabled) {
	@at-root #{$namespace} {
		#{$prefix}.radio.input,
		#{$prefix}.checkbox.input {
			display: inline-block;
			margin-right: 2em;
			padding-top: 0.5em;
			vertical-align: middle;
			position: relative;
			line-height: 1;

			input, label { margin: 0; }

			> input {
				position: absolute;
				z-index: 2;
				left: 0; top: 0;
				width: luiTheme(element, field, input, font-size);
				height: luiTheme(element, field, input, font-size);
				opacity: 0;
			}
			label {
				color: luiTheme(element, typography, body, color);
				display: block;
				position: relative;
				padding: 0 0 0 1.75em;
				overflow: visible;
				font-size: luiTheme(element, field, input, font-size);

				&:before {
					position: absolute;
					left: 0;
					top: 0;
					content: '';
					display: block;
					width: luiTheme(element, field, input, font-size);;
					height: luiTheme(element, field, input, font-size);;
					border-radius: 50%;
					background-color: rgba(25, 25, 25, 0.2);
					opacity: 0;
				}

				&:after {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
					display: inline-block;
					width: 1.1em;
					margin-left: 0 !important;
				}
			}

			input:not([disabled="disabled"]),
			input:not([disabled="disabled"]) + label[for] {
				cursor: pointer;
			}
			input[disabled="disabled"] + label,
			input[readonly] + label {
				&:after {
					opacity: 0.5;
				}
			}

			&.checkbox {
				label {
					@include lui_make_icon("checkbox", right);
				}
				input:checked ~ label {
					@include lui_make_icon("checkbox checked", right);
				}
				&.partial label, &.partial input:checked ~ label {
					@include lui_make_icon("checkbox partial", right);
				}
			}
			&.radio {
				label {
					@include lui_make_icon("radio", right);
					&:after {
						border-radius: 50%;
					}
				}
				input:checked ~ label {
					@include lui_make_icon("radio checked", right);
				}
			}

			input:not([disabled="disabled"]):active ~ label:before {
				@include lui_is_animated(ripple);
				animation-fill-mode: forwards;
				transform-origin: center center;
				animation-duration: 1s;
			}

			input:checked ~ label:after {
				color: luiPalette(primary, color);
			}

			// Solo checkbox: no label
			// ====
			&.solo {
				margin-right: 0;
				padding-top: 0;
				width: luiTheme(element, field, input, font-size);

				label {
					padding: 0;
					width: 100%;
					height: 1.1em;
				}
			}
		}

		#{$prefix}.field {
			.radio.input ~ label,
			.checkbox.input ~ label {
				@extend %lui_input_label;
			}

			&.vertical {
				.radio.input,
				.checkbox.input {
					display: block;
				}
			}
		}
	}
}