// Input/textarea focus, hover colors
.el-input__wrapper.is-focus,
.is-focus .el-input__wrapper,
.el-textarea {
  --el-input-focus-border: #4b5563; // Gray-600
  --el-input-focus-border-color: #4b5563; // Gray-600
  --el-select-input-focus-border-color: #4b5563; // Gray-600
  --el-input-text-color: #111827; //Gray-900
  --el-text-color-placeholder: #9ca3af; // Gray-400
  --el-input-hover-border-color: #9ca3af; // Gray-400
}

// Input/textarea error color
.el-form-item.is-error {
  .el-input__wrapper.is-focus,
  .is-focus .el-input__wrapper,
  .el-input__wrapper,
  .el-textarea {
    --el-color-danger: #ef4444;
    box-shadow: none;
    border: 1px solid var(--el-color-danger);
  }
}

// Override box-shadow with border properties
.el-input {
  &.is-disabled .el-input__wrapper {
    box-shadow: none;
  }

  .el-input__wrapper,
  .el-textarea__inner {
    @apply rounded-md;
    box-shadow: none;
    border: 1px solid var(--el-input-border-color);
  }

  &:not(.is-disabled) .el-input__wrapper,
  .el-textarea__inner {
    &:hover {
      box-shadow: none;
      border: 1px solid var(--el-input-hover-border-color);
    }

    &.is-focus,
    &:focus {
      box-shadow: none;
      border: 1px solid var(--el-input-focus-border-color);
    }
  }
}

// Inner input/textarea color
.el-input__inner,
.el-textarea__inner {
  @apply text-gray-900;
}

// Size
.el-input {
  @apply h-10 leading-10 w-full;
}

// Input prepend
.el-input-group__prepend {
  @apply font-semibold text-gray-900 px-3 flex gap-1 rounded-l-md rounded-r-none;

  & ~ .el-input__wrapper {
    @apply rounded-l-none rounded-r-md;
  }
}

// Input append
.el-input-group--append {
  & > .el-input__wrapper {
    border-radius: 6px 0 0 6px !important;
  }

  .append-icon {
    @apply w-10;
  }

  .el-input-group__append {
    @apply bg-white h-10 hover:bg-gray-50;

    & button {
      @apply p-0 flex items-center justify-center;
    }

    & i {
      @apply text-gray-600 text-lg;
    }
  }
}
