@import "../../styles/mixins.module";
@import "../../styles/parents.module";

.calc-comp-input-scoped {
  width: 100%;
  height: 100%;
  :global {
    .calc-comp-input {
      position: relative;
      width: 100%;
      height: auto;
      margin-bottom: 22px;
      .comp-input-wrap {
        width: 100%;
        height: 100%;
        position: relative;
        // display: flex;
        // flex-direction: row;
        // justify-content: flex-start;
        // align-items: center;
        @include flex-row(flex-start, center);
        .calc-input {
          width: 100%;
          height: 40px;
          font-size: 14px;
          border-radius: 4px;
          padding: 4px 11px;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          color: #333333;
          transition: all 0.18s linear;

          &.show-password {
            padding-right: 31px !important;
          }
          &:hover {
            border: 1px solid #40a9ff;
          }
          &:focus {
            border: 1px solid #40a9ff;
            -webkit-box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            outline: unset;
          }
          &:focus-visible {
            outline: unset;
          }
          &:-webkit-autofill {
            transition: background-color 99999s ease-in-out 0s !important;
            -webkit-text-fill-color: #a8b7c6 !important;
          }
          &::placeholder {
            color: rgba(168, 183, 198, 0.6);
          }
          &:placeholder-shown {
            text-overflow: ellipsis;
          }
        }
        .icon-input-handle-password {
          color: rgba(0, 0, 0, 0.5);
          position: absolute;
          right: 12px;
          bottom: calc((100% - 16px) / 2);
          cursor: pointer;
        }
      }
      .error-tip-wrap {
        position: absolute;
        left: 0px;
        top: 100%;
        width: 100%;
        height: auto;
        word-break: break-word;
        // display: flex;
        // flex-direction: row;
        // justify-content: flex-start;
        // align-items: flex-start;
        @include flex-row(flex-start, flex-start);
        .tip-text {
          color: #f56c6c;
          font-size: 12px;
          line-height: 1;
          padding-top: 4px;
          //   overflow: hidden;
          //   white-space: nowrap;
          //   text-overflow: ellipsis;
          //   word-break: break-word;
          @extend %overflow-hidden;
        }
      }
    }
  }
}