@use '../style/mixins' as *;
@use '../style/variables' as *;
@use '../theme/theme-mode-variables' as *;

body .p-inputtext {
  padding: 5px 0 5px 8px;
  line-height: 24px;
  background: var(--input-txt-bg-color);
  border-color: $input-txt-border-color;
  color: $input-txt-color;
}

.p-inputtext {
  color: $input-txt-color;
  font-size: $fontSize;
  background: var(--input-txt-bg-color);
  padding: .429em;
  border: 1px solid $input-txt-border-color;
  @include transition(box-shadow $transitionDuration, border-color $transitionDuration);
  @include border-radius($borderRadius);

  & {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  &:enabled:hover:not(.p-state-error) {
    border-color: $input-txt-border-hover-color;
  }

  &:enabled:focus:not(.p-state-error) {
    border-color: $input-txt-border-focus-color;
    box-shadow: 0 0 0 3px rgba(var(--base-accent-rgb), 0.2);
  }

  &:disabled {
    background: var(--input-txt-bg-disabled-color);
    border-color: $input-txt-border-disabled-color;
    color: var(--disabled-text-color);
  }

  &::placeholder {
    color: var(--input-txt-placeholder);
  }

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    -webkit-text-fill-color: $input-txt-color;
    box-shadow: 0 0 0 1000px var(--input-txt-bg-color) inset;
    transition: background-color 9999s ease-in-out 0s;
  }

  &.read-only {
    color: var(--input-txt-read-only-color);
    background-color: var(--input-txt-bg-read-only-color);
  }
}

.p-inputgroup {

  input, .p-inputtext {
    border: none !important;
    box-shadow: none !important;
  }
}

.p-input-icon-left {

  & > i {
    top: 18%;
    margin-top: unset;
    left: 0.75rem;
    font-size: 16px;
  }

  & > .p-inputtext {
    padding-left: 2.5rem;
  }
}
