$thirdColor: #a2a2a2 !default;
$inputBorderColor: lighten($thirdColor, 15%) !default;
$inputFocusBorderColor: lighten($ciColor, 20%) !default;

.input,
.dropdown:not(.bs-dropdown) .dropdownValue,
.dropdownList {
  color: $inputForegroundColor;
  background-color: #fff;
  border: solid 1px #EEE9E9;
}

.input:focus, .input:active,
.dropdown:not(.bs-dropdown):has(select:focus) .dropdownValue,
.dropdown:not(.bs-dropdown):has(select:active) .dropdownValue {
    border:solid 1px $inputFocusBorderColor;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

.focus-highlight:active, .focus-highlight:focus, .focus-highlight:has(:active), .focus-highlight:has(:focus) {
    border-radius: 6px;
    padding: 8px;
    margin: -10px;
    border: 2px solid $ciColor;
}

.input, .inputWrapper select {
  padding: 5px;
}

.input, input, select, .select {
    &[disabled], &[readonly] {
        color: lighten($inputForegroundColor, 40%);
        background-color: var(--bs-secondary-bg);
        opacity: 1;
        pointer-events: none;
    }

    &::placeholder {
        color: inherit;
        opacity: 0.55;
    }
}

select[readonly] + .dropdownValue {
    color: lighten($inputForegroundColor, 40%) !important;
    background-color: var(--bs-secondary-bg) !important;
}

.dropdown[readonly] {
    pointer-events: none;
}

textarea.form-control {
   min-height: 150px;
}
.input, .inputWrapper select {
  &:focus{
    outline:none;
    border-color: $inputFocusBorderColor;
  }
}

.inputWrapper, .dropdown:not(.bs-dropdown) {
  display: inline-block;
  width: 100%;
  position: relative;
}

.inputWrapper{
  .input, select {
      width: 100%;
  }
  .form-horizontal & .checkbox {
    // Undo default padding-top: 7px and min-height: 27px
    padding-top: 0;
    min-height: initial;
  }
}

table .checkbox {
  margin-top: 0;
  margin-bottom: 0;
}

.checkbox label, .radio label {
  > input {
    // Defeat Chrome user agent stylesheet resetting checkbox
    // cursor to "default"
    cursor: inherit;
  }
}
