/* wc.ui.label.scss */
// styles for WLabel and the label emulators



@import 'wc.ui.label_vars.scss';

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

// use inline-block on a label-dummy to prevent a required marker flying off the end
//scss-lint:disable QualifyingElement
span.label {
	display: inline-block;
}

// space between a checkable and its label
[type='radio'] + label,
[type='checkbox'] + label,
[role='checkbox'][aria-readonly='true'] + span.label,
[role='radio'][aria-readonly='true'] + span.label {
	margin-left: $hgap-small;
}

// required markers
.wc_req {
	[type='radio'] + &:before,
	[type='checkbox'] + &:before {
		margin-right: $hgap-small;
	}

	[type='radio'] + &:after,
	[type='checkbox'] + &:after {
		display: none;
	}
}

label.wc_req:after,
.label.wc_req:after,
[type='radio'] +.wc_req:before,
[type='checkbox'] + .wc_req:before {
	@include mandatory-indicator;
}

label,
.label {
	&.wc_req {
		@include border-box;
		padding-right: 1em;
		position: relative;

		&:after {
			position: absolute;
			right: $hgap-small;
			top: 0;
		}
	}
}
/* end wc.ui.label.scss */
