/* ==============================================================
   Form Conrols
   style declarations for form controls
   ==============================================================*/
.custom-control {
    input[type="checkbox"],
		input[type="radio"] {
		}
    &__icon {}


    .fa-circle-o,
		.fa-square-o,
    .fa-check-circle-o,
		.fa-check-square-o {
			color: @ci-color1;
			& when (@colorModes = true) {
				.mx-light-mode-rules ({
					color: @ci-color1;
				});
				.mx-dark-mode-rules ({
					color: @fg-general;
				});
			}

		}
}

.custom-control__icon {
	color: @ci-color1;
}

/* MODIFICATIONS */
.custom-control--checkbox {
	input[type="checkbox"] {
		&:checked ~ .custom-control__icon .fa-square-o {}
		&:checked ~ .custom-control__icon .fa-check-square-o {}
		&.disabled ~ .custom-control__icon .fa-square-o,
		&.disabled ~ .custom-control__icon .fa-check-square-o {}
	}
}
.custom-control--radio {
	input[type="radio"] {
		&:checked ~ .custom-control__icon .fa-circle-o {}
		&:checked ~ .custom-control__icon .fa-check-circle-o {}
	}
}
.custom-control--select { 
	border: @border;
	background-color: @bg-content-box;
	& when (@colorModes = true) {
		background: @white;
		.mx-dark-mode-rules ({
			background: @fg-general;
		});
		.mx-light-mode-rules ({
			background: @white;
		});
	}
	&:after {}
	&:after {}
	&.multiple {
		&:after {}
		select {}
	}
	select {
		font-size: @fontMedium;
		background: @white;
		& when (@colorModes = true) {
			.mx-dark-mode-rules ({
				background: @fg-general;
			});
			.mx-light-mode-rules ({
				background: @white;
			});
		}
		&.disabled {}
	}
	select[disabled="disabled"] {}
}
