@import '../variables';

.itf-text-field {
  &__input {
    min-height: 2rem;
    border: 0 none;
    background-color: transparent !important;

    -moz-appearance: textfield; // Hide Arrows From Input Number (Firefox)

    &::-webkit-outer-spin-button,  // Hide Arrows From Input Number (Chrome, Safari, Edge, Opera)
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
  .input-group-text {
    --bs-border-width: 0;

    background: transparent;

    &.prepend {
      padding: 0.375rem 0 0.375rem 0.75rem;
    }
    &.append {
      padding-left: .325rem;
    }
  }
  &.is-valid .input-group-text {
    color: var(--bs-form-valid-border-color);
  }
  &.is-invalid .input-group-text {
    color: var(--bs-form-invalid-border-color);
  }
  .was-validated &.form-control:valid, &.form-control.is-valid,
  .was-validated &.form-control:invalid, &.form-control.is-invalid {
    background-image: none;
  }
}

.itf-textarea {
  &.input-group {
    position: relative;
  }

  &__content {
    position: absolute;
    z-index: 10;
  }
  &__input {
    border: 0 none;
    //background-color: transparent !important;
    resize: none;
  }
  &__autogrow &__input {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100% !important;
  }
  &__autogrow &__autogrow-text {
    white-space: pre-line;
    visibility: hidden;
    min-height: 4rem;
    max-height: 75vh; // жалувались, що коли багато тексту,
    // то поле за межі вікна виходить і не зручно
  }
}
