fuelux/less/forms.less

.labelHover() {
	&:hover {
		color: @grayLight;
	}
}

.radio, .checkbox {
	&-inline {
		padding-left: 0;
		&.highlight {
			left: -8px;
		}
	}
	// This handy trick allows us to make rules for .radio, .checkbox, .radio-inline, and, .checkbox-inline all at once.
	&, &-inline {

		// Sometimes the wrapping containter is a div with .checkbox or .radio, and has a label within it.
		// Sometimes the label itself is the wrapping container, and has .checkbox or .radio on it.
		// The use of the amperstand "parent selector" here allows us to cover many scenarios at once, with terse, but elegant, code.
		label&, .input-label&, & label, & .input-label {
			.labelHover;
		}
		
		label, .input-label, label& {
			cursor: pointer;
			font-weight: normal;
			.labelHover;
		}

		&.highlight {

				input:not(.sr-only) {
				& ~ label {
					padding: 4px;
					border-radius: @baseBorderRadius;
				}
				&:checked ~ label {
					background-color: #e9e9e9;
					opacity: 1;
					z-index: 0;
				}
			}
		}

		input:not(.sr-only) {

			position: absolute;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: 0;
			overflow: hidden;
			clip: rect(0,0,0,0);
			border: 0;

			& ~ label {
				padding-left: 0;
				&:before {
					font-family:"Glyphicons Halflings";
					font-style: normal;
					font-weight: normal;
					font-variant: normal;
					text-transform: none;
					line-height: 1;
					speak: none;
					border: 1px solid #adadad;
					color: #fff;
					font-size: 9px;
					width: 14px;
					height: 14px;
					padding: 0;
					margin-top: 0;
					margin-bottom: -2px;
					cursor: pointer;
					display: inline-block;
					z-index: 2;
					content: "";
				}

			}



			/* for keyboard tabbing */
			&:active ~ label, &:focus ~ label {
				color: @text-color;
				color: rgb(91, 157, 217);
				cursor: pointer;
				
				&:before {
					outline-color: rgb(91, 157, 217);
					outline-offset: -2px;
					outline-style: auto;
					outline-width: 5px;
				}

				&, &:hover {
					color: @text-color;
					cursor: pointer;
				}
			}
			&:active:hover ~ label, &:focus:hover ~ label, &:focus:hover ~ label, &:checked:hover ~ label {
				&, &:hover {
					color: @text-color;
					cursor: pointer;
				}
			}




			&[disabled="disabled"] {
				& ~ label, & ~ label:before {
					color: @text-color;
					opacity: 0.5 !important;
					cursor: not-allowed !important;
				}
			}

			&:checked ~ label {
				&:before {
					background: #39b3d7;
					border-color: #39b3d7;
				}
			}

		}

		&, &:hover {
			input {
				&:checked {

				}
			}
		}

		&.highlight {
			&:before {
				left: 4px;
				top: 7px;
			}
		}
	}


	&.highlight {
		input:not(.sr-only) {
			& ~ label {
				left: -8px;
				position: relative;
			}
		}
	}


	&-inline {
		padding-left: 0;
		&.highlight {
			// left: -8px;
		}
		&:before {
			left: 0;
			top: 3px;
		}
	}


}