// styles for WLabel and the label emulators
// hint is additional text for labels that describe other information for the
// related form element
.wc-label-hint {
  display: block;
  @if ($wc-label-hint-size > 0) {
    font-size: $wc-label-hint-size;
  }
  @if ($wc-label-weight != normal) {
    font-weight: normal;
  }
}

// WLabel produces many things which are not label elements, so we have to use
// the class here.
.wc-label {
  // use inline-block to prevent a required marker flying off the end
  display: inline-block;
  @if ($wc-label-weight != normal) {
    font-weight: $wc-label-weight;
  }

  @if ($wc-label-mandatory-indicator != -1) {
    // mandatory indicator
    &.wc_req {
      @include border-box;
      // allows for better position of mandatory indicator.
      @include fit-content;
      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;
      }
    }
  }

  // The label emulator for fieldset-bound Input controls (eg WCheckBoxSelect)
  // are hidden by default. In some field layouts they are made visible.
  &[data-wc-for] {
    display: none;
  }
}

@if ($wc-label-mandatory-indicator != -1) {
  // Mandatory indicator positioning in a label for a checkbox or radio.
  [type='checkbox'],
  [type='radio'] {
    + .wc_req {
      &::before {
        @include mandatory-indicator;
        margin-right: $wc-gap-small;
      }

      &::after {
        display: none;
      }
    }
  }
}

// Label/read-only equivalent for a checkbox or radio button.
.wc-ro-input + .wc-label {
  // .wc-label's inline-block can cause the label to fall under the input when
  // there is not enough room for the label
  display: inline;
}

// When WCheckBoxSelect/WRadioButtonSelect these labels do not have the wc-label
// class as they are generated from options. TODO: We should fix that.
.wc-input-wrapper + label,
.wc-ro-input + .wc-label,
input + label, // WCheckBoxSelect, WRadioButtonSelect
label + .wc-input-wrapper {
  margin-left: $wc-gap-small;
}

@if ($wc-label-weight != normal) {
  .wc-checkbox + .wc-label,
  .wc-radiobutton + .wc-label,
  input + label {
    font-weight: normal;
  }
}

[hidden],
.wc-off {
  + label,
  + input,
  + .wc-input-wrapper {
    margin-left: 0;
  }
}

@import 'wc.label.color';
