@import "../../../../assets/scss/variables";

.text-input-wrapper{
  position: relative;

  .text-field.wrapped {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    min-height: 40px;
    height:100%;
    display: block;
    padding: 8px 12px;
    cursor: text;
  }
}

.text-field {
  outline: none;
  width: 100%;
  //min-width: 226px;
  min-width: 100px;
  height: 47px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: pink;
  padding-left: 16px;
  color: $title-color;
  font-size: $input-size;
  font-weight: $regular;
  box-sizing: border-box;

  &::placeholder {
    color: $text-color;
    font-size: 1.2rem;
  }

  //&:focus-visible {
  //  border-color: $main-color;
  //}

  &.afm-form,
  &.user-form-field {
    background-color: unset;
    border: unset;
    border-bottom: 1px solid #707070;
    height: 30px;
    padding: 0 0 0 0;
    font-size: $input-size;
    font-weight: $extra-light;
    color: $text-color;
    letter-spacing: 0.8px;
    line-height: 1;
    border-radius: 0;


    &.disable {
      border-bottom: unset;
      cursor: default;
    }

    &:focus {
      outline: none;
    }

    &::placeholder {
      font-weight: $extra-light;
      font-size: $index-size;
    }

    &.hasError {
      border-color: $error-color;
    }
  }

  &.hasError {
    border-color: $error-color;
  }

}

.type-toggler {
  img {
    cursor: pointer;
  }
}

.clear {
  cursor: pointer;
  position: relative;
  right: 20px;
  top: -3px;
  margin-right: -10px;
  opacity: 0; /* Initially hide the .clear element */
  transition: opacity 0.3s ease; /* Add a transition effect for smooth visibility */
}

.type-toggler {
  position: absolute;
  right: 5px;
  top: 0px;
  cursor: pointer;
}

.error-message {
  color: $error-color;
  font-size: 1.2rem;
  padding-left: 4px;
  margin-top: 5px;
}

.text-field:focus + .clear {
  opacity: 1; /* Initially hide the .clear element */
  margin-right: -10px;
}

.text-field:focus + .clear + .type-toggler {
 display: none;
}