@import './custom-keyboard';
@import '../../../theme/components/textfield.less';

// * {
//   box-sizing: border-box;
// }

@listPrefixCls: im-inputitem;
@inputPrefixCls: im-input;
@input-lable-text-width: 15 * @hd;


.@{listPrefixCls}-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: @list-item-height;
  background-color: @fill-base;
  vertical-align: top;
  // overflow: hidden;
  transition: background-color 200ms;
  align-items: center;
  justify-content: center;
  font-size: @font-size-base;

  .@{listPrefixCls}-line {
    // position: relative;
    display: flex;
    flex: 1;
    align-items: flex-start;
    align-self: stretch;
    // align-items: center;
    padding-right: @h-spacing-md;
    // overflow: hidden;
    // border-bottom: 1px solid #ddd;
    padding: 12 * @hd 0;
    margin: 0 15px;
  }


  // .@{listPrefixCls}-line-hidebottomline {
  //   border: none;
  //   // border-bottom: 1px solid #000;
  // }

  .@{listPrefixCls}-isTitleUp {
    display: flex;
    flex-direction: column;
  }


  &.@{inputPrefixCls}-item {
    min-height: 44 * @hd;
    // max-height: 85 * @hd;
    //padding-left: @h-spacing-lg;
  }

  .@{inputPrefixCls}-title-container {
    // width: 105*@hd;
    width: 35%;
    display: flex;
    align-items: center;

    img {
      padding-left: 5px;
      width: 15px;
      height: 15px;
      position: relative;
      top: 2px;
    }
  }

  .@{inputPrefixCls}-titleWrap {
    width: 100%;
    margin-bottom: 10px;

    >div {
      display: flex;
      align-items: center;

      img {
        width: var(--size-icon-m);
        height: var(--size-icon-m);
        padding-right: 5px;
      }
    }
  }

  .@{inputPrefixCls}-label {
    color: @textfield-lable-color;
    font-size: @textfield-lable-font-size ;
    margin-left: 0;
    // margin-right: @h-spacing-sm;
    min-width: 105*@hd;
    // min-width: 35%;
    text-align: left;
    padding-right: 5*@hd;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
    line-height: 21*@hd;
    box-sizing: border-box;

    svg {
      width: @textfield-lable-icon-size;
      height: @textfield-lable-icon-size;
      vertical-align: middle
    }

    &-desc {
      // width: 105px;
      color: @color-text-secondary;
      letter-spacing: 0;
      text-align: left;
      font-weight: 400;
      font-size: @font-size-caption-sm;
      line-height: 18*@hd;
      margin-top: 5*@hd;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

    }

    // &::after {
    //   content: " ";
    //   position: absolute;
    //   position: absolute;
    //   bottom: 0;
    //   left: 0;
    //   background-color: @fill-base;
    //   width: 125*@hd;
    //   height: 12 * @hd;
    // }

    // &.@{inputPrefixCls}-label-2 {
    //   // width: 2 * @input-label-width;
    //   width: 2* @input-lable-text-width
    // }

    // &.@{inputPrefixCls}-label-3 {
    //   // width: 3 * @input-label-width;
    //   width: 3* @input-lable-text-width
    // }

    // &.@{inputPrefixCls}-label-4 {
    //   // width: 4 * @input-label-width;
    //   width: 4* @input-lable-text-width
    // }

    // &.@{inputPrefixCls}-label-5 {
    //   // width: 5 * @input-label-width;
    //   width: 5* @input-lable-text-width
    // }

    // &.@{inputPrefixCls}-label-6 {
    //   // width: 6 * @input-label-width;
    //   width: 6* @input-lable-text-width
    // }

    // &.@{inputPrefixCls}-label-7 {
    //   // width: 7 * @input-label-width;
    //   width: 7* @input-lable-text-width
    // }
  }

  .@{inputPrefixCls}-label-up {
    // padding-left: 5px;
    width: 100% !important;

  }

  .@{inputPrefixCls}-control {
    font-size: @font-size-base;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    // align-items: center;

    input {
      color: @textfield-input-color;
      font-size: @textfield-input-font-size;
      appearance: none;
      width: 100%;
      min-height: 21*@hd;
      // height: 21*@hd;
      padding-right: 10px;
      border: 0;
      background-color: transparent;
      // line-height: @line-height-base;
      box-sizing: border-box;
      font-weight: 400;
      text-align: left;
      line-height: normal;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &::placeholder {
        color: @textfield-placeholder-color;
        // display: inline-block;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // font-size: @textfield-placeholder-font-size;
      }

      &:disabled {
        color: @textfield-input-color-disable;
        background-color: @fill-base;
      }
    }

    // .@{inputPrefixCls}-error-extra {
    //   font-family: PingFangSC-Regular;
    //   font-size: @textfield-error-font-size;
    //   color: @textfield-error-color;
    //   font-weight: 400;
    //   margin-top: 5*@hd;
    //   // height: @icon-size-sm;
    //   // width: @icon-size-sm;
    //   // margin-left: @v-spacing-sm;
    //   // .encoded-svg-background('error');

    //   // background-size: @icon-size-sm auto;
    // }
    &-extra {
      input {
        width: 70%;
      }
    }

    &-isTitleUp {
      input {
        width: 85%;
      }
    }
  }

  // .@{inputPrefixCls}-control-top {
  //   font-size: @font-size-base;
  //   flex: 1;
  //   margin-top: -20*@hd;

  //   input {
  //     color: @picker-item-color;
  //     font-size: @font-size-base;
  //     appearance: none;
  //     width: 100%;
  //     padding: 2 * @hd 0;
  //     border: 0;
  //     background-color: transparent;
  //     line-height: @line-height-base;
  //     box-sizing: border-box;
  //     font-weight: 400;
  //     text-align: left;

  //     &::placeholder {
  //       color: @color-text-placeholder;
  //       line-height: 1.2;
  //     }

  //     &:disabled {
  //       color: @color-text-input-disabled;
  //       background-color: @fill-base;
  //     }
  //   }
  // }

  // .@{inputPrefixCls}-control-desc {
  //   font-size: @font-size-base;
  //   flex: 1;
  //   // margin-top: -20*@hd;

  //   input {
  //     color: @picker-item-color;
  //     font-size: @font-size-base;
  //     appearance: none;
  //     width: 100%;
  //     padding: 2 * @hd 0;
  //     border: 0;
  //     background-color: transparent;
  //     line-height: @line-height-base;
  //     box-sizing: border-box;
  //     font-weight: 400;
  //     text-align: left;

  //     &::placeholder {
  //       color: @color-text-placeholder;
  //       line-height: 1.2;
  //     }

  //     &:disabled {
  //       color: @color-text-input-disabled;
  //       background-color: @fill-base;
  //     }
  //   }
  // }

  .@{inputPrefixCls}-control-right {
    input {
      text-align: right;
    }
  }

  .@{inputPrefixCls}-control-center {
    input {
      text-align: center;
    }
  }

  .@{inputPrefixCls}-control-notitle {
    // padding-left: 15*@hd;
  }

  .@{inputPrefixCls}-clear-wrap {
    width: 15*@hd;
    height: 21*@hd;

    // position: relative;

    .@{inputPrefixCls}-clear {
      position: relative;
      // width: 15*@hd;
      // height: 15*@hd;
      width: @textfield-clear-icon-size;
      height: auto;
      top: 3*@hd;
      right: 0*@hd;
    }
  }

  .@{inputPrefixCls}-clear-desc {
    margin-top: -30*@hd;

  }

  .@{inputPrefixCls}-searchWrap {
    position: absolute;
    top: 45*@hd;
    right: 0;
    left: 0;
    // width: 265*@hd;
    // width: calc(100% - 30px);
    max-height: 220*@hd;
    overflow-y: auto;
    padding: 0 15*@hd;
    background-color: #fff;
    // border-top: 1px solid #ccc;
    z-index: 100;

    &-item {
      height: 44*@hd;
      line-height: 44*@hd;
      // font-family: PingFangSC-Regular;
      font-size: @textfield-search-text-font-size;
      color: @textfield-search-text-color;
      font-weight: 400;
      width: 100%;
      // width: calc(100% - 125px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &.@{inputPrefixCls}-focus {
    .@{inputPrefixCls}-clear {
      display: block;
    }
  }

  .@{inputPrefixCls}-extra {
    // flex: initial;
    min-width: 0;
    // max-height: @icon-size-sm;
    overflow: hidden;
    padding-right: 0;
    line-height: @line-height-base;
    color: @color-text-main;
    font-size: @font-size-base;
    margin-left: 10*@hd;
    // margin-top: 3*@hd;
    max-width: 80*@hd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
  }

  .@{inputPrefixCls}-error {
    font-size: @textfield-error-font-size;
    color: @textfield-error-color;
    font-weight: 400;
    margin-top: 6px;
    // margin: 0 15px;
    // padding: 10px 0;
    // width: 60%;
    // position: absolute;
    // top: 29px;
    // left: calc(35% - 10px);
    // border-top: 1px solid #ddd;

    // &-isTitleUp {
    //   width: calc(100% - 30px);
    //   position: relative;
    //   top: 0px;
    //   left: 0px;
    // }

    span {
      // padding-left: 15px;
    }

    &.@{inputPrefixCls}-item {
      // height: 67 * @hd;
      //padding-left: @h-spacing-lg;
    }


    .@{inputPrefixCls}-label {
      // margin-top: -20px;
      // height: 67*@hd;
      // padding: 12*@hd 5*@hd 12*@hd 15*@hd ;


      &-label-desc {
        margin-top: 5*@hd;
      }
    }


    .@{inputPrefixCls}-control {
      font-size: @font-size-base;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      // padding: 12px 0;
      // height: 67*@hd;

      input {
        color: @color-text-input-content;
        font-size: @font-size-base;
        appearance: none;
        width: 100%;
        padding: 0;
        // height: 21px;
        // padding: 2 * @hd 0;
        border: 0;
        background-color: transparent;
        line-height: @line-height-base;
        box-sizing: border-box;
        font-weight: 400;
        text-align: left;
        // display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &::placeholder {
          color: @color-text-placeholder;
          // display: inline-block;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // line-height: 1.2;
        }
      }

    }


    .@{inputPrefixCls}-searchWrap {
      top: 68px;
    }

    // .@{inputPrefixCls}-clear-desc {
    //   margin-top: -20*@hd;

    // }
  }

  .@{inputPrefixCls}-error-isTitleUp {
    font-size: @textfield-error-font-size;
    color: @textfield-error-color;
    font-weight: 400;
    border-top: 1px solid #ddd;
    width: calc(100% - 30px);
    padding: 10px 0;
    margin: 0 15px;
  }

}

.im-inputitem-item-bottomLine {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  // width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}