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

.input-wrapper {

  .text-field {
    outline: none;
    width: 100%;
    height: 47px;
    border: 1px solid $input-border;
    border-radius: 10px;
    background: $input-bg;
    padding-left: 16px;
    color: $main-color;
    font-size: $input-size;
    font-weight: $regular;
    box-sizing: border-box;

    &::placeholder {
      font-size: 1.2rem;
    }

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

    &.afm-form,
    &.user-form-field {
      background-color: unset;
      border: unset;
      border-bottom: 0.1rem solid;
      height: 30px;
      padding: 0 0 0 0rem;
      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;
    }
  }
}