// ------------------------------------\
// FORMS
// ------------------------------------/

// Stacking labels on top of input elements
.an-stackedLabel {
  @extend .a-fontSizeXS;
  @include a-fontMedium;
  display: block;
  margin-bottom: $spacer * 0.5;
}

.a-custom-select {
  width: 100%;
}

.a-custom-checkbox {
  &.inactive {
    color: inherit;
    cursor: not-allowed !important;
    opacity: 0.7;
  }

  .custom-control-input {
    &:disabled {
      ~ .custom-control-label {
        &::before {
          background-color: $white !important;
        }
      }
    }
  }

  .custom-control-label {
    display: inline;
  }
}

.a-form-group-datepicker {
  .input-group {
    &.disabled {
      .a-icon-right {
        border-right: 2px solid $grey-medium;
        border-left: none;
      }
    }
  }
}

.a-form-group-darkBackground {
  .form-control {
    // sass-lint:disable-block no-important
    color: $white !important;

    &::placeholder {
      // sass-lint:disable-block no-important
      color: $blue-lighter !important;
    }
  }

  .ai {
    color: $blue-lighter;
  }

  .input-group {
    &.a-input-focus,
    &:focus,
    &:hover {
      .form-control {
        background-color: transparent;
        border-color: $blue;

        &::placeholder {
          // sass-lint:disable-block no-important
          color: transparent !important;
        }
      }

      .input-group-append {
        background-color: transparent;
        border-color: $blue;
      }
    }
  }

  .input-group-append {
    .btn {
      &:focus,
      &:hover {
        background-color: transparent;
      }
    }
  }
}

.an-input-phonenumber {
  max-width: 200px;
}

.an-passwordStrengthMeter {
  display: flex;
  width: 100%;
  align-items: center;

  @include media-breakpoint-up( lg ) {
    min-width: calc(100% + 84px);
  }

  meter {
    width: 100%;
    height: $spacer;

    &,
    &::-webkit-meter-bar {
      background: none;
      background-color: $grey-light;
      border: none;
    }

    &::-webkit-meter-optimum-value {
      background: none;
      background-color: $green;
    }

    &::-webkit-meter-suboptimum-value {
      background: none;
      background-color: $yellow;
    }

    &::-webkit-meter-even-less-good-value {
      background: none;
      background-color: $red;
    }

    &:-moz-meter-optimum {
      &::-moz-meter-bar {
        background: none;
        background-color: $green;
      }
    }

    &:-moz-meter-sub-optimum {
      &::-moz-meter-bar {
        background: none;
        background-color: $yellow;
      }
    }

    &:-moz-meter-sub-sub-optimum {
      &::-moz-meter-bar {
        background: none;
        background-color: $red;
      }
    }
  }

  label {
    @include a-fontMedium;
    flex: 1 0 60px;
    margin-left: $spacer * 2;
  }
}