@import '../utils/theme/variables.scss';

$label-color: $brc-darkGreyBlue !default;
$hint-label-color: $brc-coolGrey !default;
$hint-tooltip-color: $brc-white !default;
$hint-tooltip-background-color: $brc-darkGreyBlue !default;
$hint-box-color: $brc-black !default;
$hint-box-background-color: $brc-paleGrey !default;
$hint-box-border-color: $brc-coolGrey !default;
$required-badge-color: $brc-strawberry !default;
$required-badge-position: left !default;

.form-field {
  .form-field-label {
    position: relative;
    color: $label-color;
    font-size: 12px;
    margin-bottom: 3px;
    font-weight: $brc-semibold;
  }

  .form-field-hint {
    &.form-field-hint-label {
      margin-top: 3px;
      color: $hint-label-color;
    }
    &.form-field-hint-tooltip {
      color: $hint-tooltip-color;

      .popover-content {
        width: 100%;

        .form-field-hint-left-arrow {
          margin-top: 10px;

          path {
            fill: $hint-tooltip-background-color;
          }
        }

        .form-field-hint-content {
          background-color: $hint-tooltip-background-color;
          padding: 8px 15px;
          border-radius: 2px;
        }
      }
    }
    &.form-field-hint-box {
      margin-left: 10px;
      color: $hint-box-color;
      background-color: $hint-box-background-color;
      border: 1px solid $hint-box-border-color;
      padding: 10px;
    }
    font-size: 13px;
  }

  &.is-required {
    .form-field-label {
      @if ($required-badge-position == left) {
        > ::before {
          content: '*';
          color: $required-badge-color;
          font-size: 18px;
          font-weight: $brc-regular;
          margin-right: 2px;
        }
      }

      @if ($required-badge-position == right) {
        > ::after {
          content: '*';
          color: $required-badge-color;
          font-size: 18px;
          font-weight: $brc-regular;
          margin-left: 2px;
        }
      }
    }
  }

  &.is-disabled {
    opacity: 0.5;
  }

  &.is-horizontal {
    .form-field-label {
      font-size: 14px;
      margin-bottom: 0;
      margin-left: 10px;
    }
  }
}
