/**
* @name Labels
* @description We set out to create an easy, powerful and versatile form layout system. A combination of form styles and the layout-grid means you can do almost anything.
* @category controls
* @component label
*/

@import '../settings/labels';
@import '../settings/inputs';
@import '../settings/forms';

@import '../tools/mixins/label';

@include exports ('cui-label') {
  .#{$label__class} {
    @include form-label;
    &.right {
      @include form-label(right, false);
    }
    &.inline {
      @include form-label(inline, false);
    }
    // Styles for required inputs
    small {
      // color: scale-color($label__font-color, $lightness: 15%);
      text-transform: $form-label-small-transform;
    }

    &__secondary-label-container {
      display: flex;
      align-items: center;

      > .#{$label__class}__secondary-label {
        padding-left: .5rem;
        font-family: $label__font-family;
        font-size: $label__font-size--secondary;
        line-height: $label__line-height--secondary;
        color: $label__font-color--secondary;

        .#{$dark-class} &,
        &.#{$label__class}--dark {
          color: $label__font-color--secondary--dark;
        }
        cursor: pointer;
      }
    }
  }
}