// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.
.grf-select {
  width: 100%;
  padding: 7px 10px;
  color: @Grey_l;
  border-color: @Grey_l;
}
/* INPUTS */
/* ================== */
.grf-input-default {
  background: @Silver_l;
  padding: 7px 15px;
  border: 1px solid @Grey_l;
  width: 100%;
  margin: 10px 0;
  transition: all ease-in-out .3s !important;
  &:focus, &:active {
    box-shadow: 0px 0px 5px @Mint_3;
    border-color: @Mint_3;
    outline: none;
  }
  border-radius: 0;
  &.-textarea {
    height: 150px;
  }
}

.has-error {
  .grf-input-default {
    border: 1px solid @Ruby_l;
  }
  .help-block {
    color: @Ruby_l;
    font-size: 0.8em;
    ul {
      margin: 0;
    }
  }
}

.grf-input-group {
  width: 100%;
  height: 35px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  margin: 20px 0;
  input {
    flex-basis: 80%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border: 1px solid @Dark-o1;
    border-right: 0;
    &:focus {
      outline: none;
      border-color: @Dark-o1;
      box-shadow: none;
      .grf-input-group {
        box-shadow: 0px 0px 10px @Mint_3;
      }
    }
  }
  button {
    flex-basis: 30%;
    height: 100%;
    background: none;
    border: 1px solid @Dark-o1;
    border-left: 0;
    cursor: pointer;
    &:focus {
      box-shadow: none;
      outline: 0;
    }
    &.-pri {
      background: @Mint_3;
      color: white;
    }
  }
  .vig__item {
    border-top: 1px solid @Dark-o1;
    border-bottom: 1px solid @Dark-o1;
    flex-basis: 35%;
    .dropdown {
      color: @Dark_b;
      border-left: 1px solid @Dark-o2;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      height: 100%;
      &:hover {
        button {
          color: white;
        }
      }
      button {
        color: @Dark_b;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0 !important;
        font-size: 14px;
        line-height: 14px;
        border: none;
        width: 100%;
        &:focus, &:active, &:hover {
          outline: 0;
          box-shadow: none;
          background: white;
          color: @Dark_b;
        }
      }
      &.show {
        button {
          color: @Dark_b;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
          border-radius: 0 !important;
          font-size: 14px;
          line-height: 14px;
          border: none;
          &:focus, &:active, &:hover {
            outline: 0;
            box-shadow: none;
            background: white;
            color: @Dark_b;
          }
        }
      }
    }
  }

  &.-br {
    input {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    button {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
  &.-lg {
    height: 50px;
  }
}

.grf-input-sm, .grf-input-group-sm {
  height: 30px;
  line-height: 30px;
}

.grf-input-group-sm {
  input, button {
    height: 30px;
    font-size: .8rem;
  }
}
.vl-form-response {
  margin-top: 10px;
  &.error {
    color: @Ruby_l;
  }
  &.success {
    color: @Mint_3;
  }
}

.grf-form {
  &.form-no-label {
    .col-form-label {
      display: none;
      visibility: hidden;
    }
    .vlc-form-field-wrap {
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  .form-group {
    margin-bottom: 0;
  }
}