/* wc.ui.label.scss */
// styles for WLabel and the label emulators
@import 'label-mixins';

.wc-label-hint { // hint is additional text for labels that describe other information for the related form element
	@include label-hint;
}


// use inline-block to prevent a required marker flying off the end
.wc-label {
	display: inline-block;
	font-weight: bold;

	&.wc_req {
		@include border-box;
		@include fit-content; // allows for better position of mandatory indicator.
		max-width: 100%; // do not allow fit-content to grow too big.
		padding-right: 1em;
		position: relative; // for the placing of the mandatory indicator.

		&:after {
			@include mandatory-indicator;
			position: absolute;
			right: $wc-gap-small;
			top: 0;
		}
	}
}

[type='checkbox'],
[type='radio'] {
	+ .wc_req {
		&:before {
			@include mandatory-indicator;
			margin-right: $wc-gap-small;
		}

		&:after {
			display: none;
		}
	}
}

// space between a checkable and its label
input + label,
.wc-selecttoggle + label,
input + .wc-label,
.wc_ro + .wc-label {
	display: inline; // .wc-label's inline-block can cause the label to fall under the input when there is not enough room for the label
	font-weight: normal;
	margin-left: $wc-gap-small;
}

label + input {
	margin-left: $wc-gap-small;
}
