@import "../css/colors"
@import "../css/vars"

:local
  .label
    font-size: 16px
    font-family: $sansserif
    color: $textGray
    margin-bottom: 5px
    margin-top: 3px
    cursor: inherit
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

  .label.inline
    display: inline-block

  span.error
    color: $red

  .container.success .label:not(.noContainerStyle),
  .label.success
    color: $green

  .container.warning .label:not(.noContainerStyle),
  .label.warning
    color: $yellow

  .container.info .label:not(.noContainerStyle),
  .label.info
    color: $blue

  .container.error .label:not(.noContainerStyle),
  .label.error
    color: $red

  .input + .label
    // Put the order above the input.
    // Having the input first in the html allows us to style the label based on input pseudo selectors.
    order: -1

  .input:disabled + .label
    color: $middleGray