// INPUTS
.el-input {
  .el-input__inner {
    border-color: $tf-light-gray;
    color: $tf-dark-gray;

    &:focus {
      outline: none;
      border-color: $tf-blue;
    }

    &::placeholder {
      color: $tf-medium-gray;
    }
  }

  &.is-disabled {
    .el-input__inner {
      &::placeholder {
        color: $tf-light-gray;
      }
    }

    .el-input-group__append,
    .el-input-group__prepend {
      color: $tf-medium-gray;
    }
  }

  &.el-input--medium {
    .el-input__inner {
      padding: 0 10px;
      height: 30px;
      line-height: 26px;
      font-size: 14px;
    }
  }
}

// custom autocomplete textarea (Input with Options)
.auto-complete-textarea .el-textarea__inner {
  resize: none;
  padding: 3px 15px;
  color: $tf-dark-gray;
  font-size: 14px;
  /* stylelint-disable declaration-no-important  */
  min-height: 30px !important;
  /* stylelint-enable declaration-no-important  */
  max-height: 94px;
}

.auto-complete-textarea.auto-collapse {
  .el-textarea__inner:not(:focus) {
    /* stylelint-disable declaration-no-important  */
    height: 30px !important;
    /* stylelint-enable declaration-no-important  */
  }
}

.el-popover.el-select-dropdown {
  padding: 0;
  margin-top: 4px;

  .el-popover__title {
    display: none;
  }
}
// custom autocomplete textarea

// multi select dropdown
.multi-select-dropdown {
  box-sizing: border-box;
  cursor: pointer;

  &:focus {
    outline: none;
  }

  &.is-disabled {
    cursor: not-allowed;
  }

  &:not(.is-disabled) {
    .el-input__inner {
      cursor: pointer;
    }
  }

  .el-input__inner {
    font-size: 1rem;
    border-radius: 2px;
    height: 30px;
    line-height: 30px;

    &::placeholder {
      font-weight: 600;
      color: $tf-medium-gray;
    }
  }

  .el-input__suffix {
    display: flex;
    align-items: center;

    svg {
      width: 20px;
      height: 12px;
      fill: $tf-dark-gray;
    }
  }
}

.el-checkbox {
  display: flex;
}

.multi-select-popover {
  padding: 0;
  box-sizing: border-box;

  .el-checkbox {
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 13px 16px 13px 14px;

    &:not(:last-child) {
      border-bottom: 1px solid $tf-extra-light-gray-1;
    }

    &:focus-within {
      // outline: 0;
      color: $tf-blue;
    }

    + .el-checkbox {
      margin-left: 0;
    }

    &:hover {
      background: $tf-light-blue;
      color: $tf-blue;
    }

    .el-checkbox__label {
      padding-left: 8px;
      font-size: 14px;
    }
  }
}

.el-form-item {
  &.is-annotated {
    .el-input__inner,
    .el-textarea__inner {
      &,
      &:focus {
        border-color: $tf-green;
      }
    }
  }

  &.is-error {
    .el-form-item__error {
      padding-top: 8px;
    }

    .el-form-item__label {
      color: $tf-red;
      font-weight: 700;
    }

    .el-input__inner {
      &,
      &:focus {
        border-color: $tf-red;
      }
    }

    .el-select .el-input__inner {
      &,
      &:focus {
        color: $tf-red;
      }

      &::placeholder {
        color: $tf-red;
      }
    }
  }
}

// Checkbox styles
.el-checkbox__inner {
  width: 16px;
  height: 16px;
  border-color: $tf-light-gray;

  &::after {
    top: 1px;
    left: 4px;
    width: 4px;
    height: 7px;
  }
}

.el-checkbox__input.is-focus {
  .el-checkbox__inner {
    border-color: $tf-dark-gray;
  }
}

.el-checkbox__input.is-checked .color-label {
  color: $tf-blue;
}

.el-checkbox__input.is-disabled {
  .el-checkbox__inner {
    border-color: $tf-light-gray;
    background: $tf-extra-light-gray-1;
  }
}

.el-checkbox__input.is-disabled.is-checked {
  .el-checkbox__inner {
    border-color: $tf-light-gray;
    background: $tf-extra-light-gray-1;

    &::after {
      border-color: $tf-light-gray;
    }
  }
}

.el-checkbox__label {
  padding-left: 8px;
  font-size: 14px;
  line-height: 18px;
}

// SELECTS
.el-select {
  .is-focus {
    .el-input__inner {
      color: $tf-dark-gray;
    }

    .el-input__inner::placeholder {
      color: $tf-dark-gray;
    }
  }

  .el-input__inner {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    border-radius: 2px;
    border: solid 1px $tf-light-gray;
    padding-left: 10px;
    padding-right: 25px;

    &::placeholder {
      color: $tf-medium-gray;
    }
  }

  .el-input .fa-icon.el-input__icon.el-select__caret {
    fill: $tf-dark-gray;
    // width: 10px;
    margin-right: 6px;
  }

  .el-input.el-input--suffix {
    line-height: 26px;
  }

  &.el-select--medium {
    .el-input.el-input--suffix {
      line-height: 26px;
    }
  }

  &.el-select--large {
    .el-input.el-input--suffix {
      line-height: 36px;
    }

    .el-input--large .el-input__inner {
      font-size: 16px;
      height: 36px;
      line-height: 36px;
    }

    .el-input .el-input__icon.el-select__caret {
      // width: 10px;
      margin-right: 6px;
    }
  }

  .el-icon-arrow-up:before {
    content: '\e60c';
  }
}

.el-select-dropdown__list {
  padding: 0;
}

// radio-group-buttons
.el-radio-button--small .el-radio-button__inner {
  font-size: 14px;
  padding: 5px 14px;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  font-weight: 700;
}

.el-radio-button__inner {
  transition: none;
}

// labels
.el-form--label-top .el-form-item__label {
  padding: 0 0 5px;
}

.el-form-item__label {
  color: $tf-dark-gray;

  &:before {
    // There is a prop to hide this but for some reason, it didn't do anything. I think our scss files might be out of sync or something.
    .is-required & {
      display: none;
    }
  }
}

.el-form-item--medium {
  .el-form-item__content,
  .el-form-item__label {
    line-height: 26px;
  }
}

.el-form-item__content {
  line-height: 1;
}

// text areas
.el-textarea__inner {
  border-radius: 0;
}