/* *****************************************************************************
*
*  FORM
*
* ***************************************************************************** */
.form-control {
  font-size: $form-font-size;
  padding-right: 3rem;

  &.readonly,
  &[readonly] {
    pointer-events: none;
    padding: 0;
    background: none;
    border: none;
  }

  &.is-invalid {
    background: fade_out($form-feedback-invalid-color, .8);
    border-color: fade_out($form-feedback-invalid-color, .8);
  }

  &-lg {
    .form-group__input-icon-container {
      @include media-scale(padding-top, $input-padding-y, $input-padding-y-sm, $input-padding-y-lg);
      @include media-scale(padding-bottom, $input-padding-y, $input-padding-y-sm, $input-padding-y-lg);
      @include media-scale(padding-left, $input-padding-x, $input-padding-x-sm, $input-padding-x-lg);
      @include media-scale(padding-right, $input-padding-x, $input-padding-x-sm, $input-padding-x-lg);
    }
  }

  &--dark {
    background: $dark;
    color: $white;

    &:focus {
      background: $dark;
      color: $white;
    }
  }
}

.form-group {
  label {
    font-size: $h6-font-size;
    margin-bottom: .45rem !important;
    min-height: 1.5rem;
  }

  &--w-small {
    width: 100%;
    max-width: 200px;
  }
  &--w-large {
    width: 100%;
    max-width: 400px;
  }

  &.is-invalid {
    label {
      color: $form-feedback-invalid-color;
    }

    .form-control {
      background: $form-feedback-invalid-bg;
      border-color: $form-feedback-invalid-bg;
      color: $form-feedback-invalid-color-txt;
    }

    .icon--error {
      display: flex !important;
      align-items: center;
      color: $vui-orange;
      //padding: $input-padding-y $input-padding-x;
      position: absolute;
      right: 1rem;
      top: 0;
      height: 100%;
      pointer-events: none;
    }

    & > .invalid-feedback {
      display: block;
    }

    .form-group__input-icon-container {
      display: none;
    }
  }

  .dropdown {
    .dropdown-menu--autocomplete {
      transform: translate3d(0, $input-height, 0)!important;
    }
  }

  .valid-feedback,
  .invalid-feedback {
    padding: $spacer-2 $input-padding-x 0 0;
  }

  label {
    @extend .mb-1;
    font-weight: $font-weight-bold;
  }

  input {
    &[disabled],
    &.disabled {
      //@extend .vui--style-reset;

      @include plain-hover-focus {
        cursor: not-allowed;
      }
    }

    @include placeholder {
      font-weight: $font-weight-light;
      color: $gray-700;
    }
  }

  &__input-icon-container {
    @extend .vui--style-reset;
    cursor: pointer;
    padding: $input-padding-y $input-padding-x;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;

    &--left {
      right: initial;
      left: 0;
      padding-left: 0;
    }
  }
}