@import '../../styles-new/mixins.less';
// @import '../../styles-new/default.less';
@import '../../theme/components/verify-code.less';
@import '../../theme/components/simplecode.less';
@verifycodePrefixCls: im-verifycode;
// @listItemPrefixCls: im-list;
@keyboardPrefixCls: im-number-keyboard-verify-code;

.@{verifycodePrefixCls} {
  min-height: @verifycode-height;
  outline: 0 none;
  box-sizing: border-box;
  // padding: 0 @verifycode-padding-horizontal;

  &-clear-wrap {
    height: 21px;
    position: relative;
    width: 15px;

    img {
      position: absolute;
      right: 10px;
      top: 3px;
      width: @verifycode-icon-size;
      height: @verifycode-icon-size;
    }
  }

  .im-input-control {
    color: @verifycode-input-color-disable;
  }

  .im-input-error {
    font-size: @verifycode-error-font-size;
    color: @verifycode-error-color;
  }

  .im-inputitem-line {
    border-bottom: 0px;
    // align-items: center;
  }

  .@{verifycodePrefixCls}-item {
    min-height: 20 * @hd;

    .@{verifycodePrefixCls}-line {

      .@{verifycodePrefixCls}-content {
        color: @color-text-secondary;
        font-size: @font-size-base-sm;
        line-height: 20 * @hd;
        padding-top: 5 * @hd;
        padding-bottom: 5 * @hd;
      }
    }
  }

  &-title-container {
    width: 35%;
  }

  &-error {
    color: @verifycode-error-color;
    font-size: @verifycode-error-font-size;
    font-weight: 400;
    // margin: 0px 15px;
    padding-left: calc(35% + 5px);
    padding-bottom: 10px;
    width: 100%;
    box-sizing: border-box;

  }

  &-btn {
    height: @verifycode-button-height;
    //min-width: 44px;
    min-width: @verifycode-button-min-width ;
    border: 1 * @hd solid @verifycode-button-border-color;
    box-sizing: border-box;
    font-size: @verifycode-button-font-size;
    color: @verifycode-button-color;
    text-align: center;
    font-weight: @verifycode-button-font-weight;
    border-radius: @verifycode-button-border-radius;
    line-height: 25 * @hd;
    padding: 0 8* @hd;
    background-color: @verifycode-button-fill;

    &-countdowning {
      // border: 1px solid transparent;
      border: 1px solid @verifycode-button-border-color-disable;
      background-color: @verifycode-button-fill-disable;
      color: @verifycode-button-color-disable;
      width: 42 * @hd;
    }


    &-loading {
      min-width: 44px;
      height: 27 * @hd;
      border: 1 * @hd solid @verifycode-button-border-color-disable;
      box-sizing: border-box;
      border-radius: @verifycode-button-border-radius;
      padding: 0 8* @hd;
      background-color: @verifycode-button-fill-disable;
      color: @verifycode-button-color-disable;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 15 * @hd;
        height: 15 * @hd;
        object-fit: contain;
      }
    }
  }

  &-btn:active {
    background-color: @verifycode-button-fill-active;
  }

  &-btn-countdowning:active {
    background-color: @verifycode-button-fill-disable;
  }

  &-right-img {
    padding: 0 6 * @hd;
    width: @verifycode-image-width ;
    height: @verifycode-image-height ;

    img {
      width: 100%;
      height: 100%;
    }
  }

  &-tips {
    margin: 8*@hd 15*@hd;
    // font-family: PingFangSC-Regular;
    font-size: @verifycode-tip-font-size;
    color: @verifycode-tip-color;
    font-weight: 400;
  }

  &-extra {
    height: 27px;
  }

  .im-inputitem-item .im-input-extra {
    margin-top: -1*@hd;
  }
}

.@{verifycodePrefixCls}-control {
  padding: 0 @verifycode-padding-horizontal-left;

  &-title {
    font-size: @verifycode-stress-label-font-size;
    color: @verifycode-stress-label-color;
    font-weight: @verifycode-stress-label-font-weight;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &-tips {
    font-size: @verifycode-stress-tip-font-size;
    color: @verifycode-stress-tip-color;
  }

  &-btn {
    line-height: 25 * @hd;
    // padding: 0 8* @hd;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;

    .error-info {
      max-width: 65%;
      color: @verifycode-stress-error-text-color;
      font-size: @verifycode-stress-error-text-font-size;

    }

    .error-btn {
      max-width: 35%;
      font-size: @verifycode-stress-button-text-font-size;
      color: @verifycode-stress-button-text-color;
      text-align: right;
      // min-width: 260px;

      span {
        font-size: @verifycode-stress-time-text-font-size;
        color: @verifycode-stress-time-text-color;
        margin-right: 5px;
      }

      .count-down-tips {
        font-size: @verifycode-stress-time-tip-font-size;
        color: @verifycode-stress-time-tip-color;
      }
    }

    &-countdowning {
      color: @verifycode-button-color-disable;
    }
  }

  .fake-input-container {
    margin: 0 10px;
    margin-top: 20px;

    .fake-input {
      display: flex;
      column-gap: @verifycode-stress-input-margin;

      .fake-input-item {
        height: @verifycode-stress-input-height;
        line-height: @verifycode-stress-input-height;
        // width: @simplecode-hight;
        min-width: @verifycode-stress-input-min-width;
        width: calc(100% - 20px - 25px);
        box-sizing: border-box;
        background-color: @verifycode-stress-input-background-color;
        border-radius: @verifycode-stress-input-radius;
        // font-family: @verifycode-stress-input-font-family;
        font-size: @verifycode-stress-input-font-size;
        font-weight: @verifycode-stress-input-font-weight;
        color: @verifycode-stress-input-color;
      }
    }



    .fake-input-item-noborder {}

    .fake-input-item-active {
      height: @verifycode-stress-input-height;
      line-height: @verifycode-stress-input-height;
      // width: @simplecode-hight;
      min-width: @verifycode-stress-input-min-width;
      width: calc(100% - 20px - 25px);
      box-sizing: border-box;
      background-color: @verifycode-stress-input-background-color;
      border-radius: @verifycode-stress-input-radius;
      // font-family: @verifycode-stress-input-font-family;
      font-size: @verifycode-stress-input-font-size;
      font-weight: @verifycode-stress-input-font-weight;
      color: @verifycode-stress-input-color;
      text-align: center;
    }

  }
}

.@{keyboardPrefixCls}-wrapper {
  &.@{keyboardPrefixCls}-wrapper-hide {
    bottom: 0 * @hd;
  }

  &.@{keyboardPrefixCls}-wrapper-inline {
    position: static;
    z-index: 0;
    margin-top: 20 * @hd;
  }

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;
  // font-family: 'PingFang SC';
  background-color: @fill-base;
  transition-duration: 0.2s;
  transition-property: transform display;
  transform: translateZ(0);
  padding-bottom: env(safe-area-inset-bottom);

  .@{keyboardPrefixCls}-confirm-button {
    height: 44 * @hd;
    background-color: @fill-base;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    .@{keyboardPrefixCls}-button-icon {
      fill: @color-text-input-content
    }
  }

  table {
    width: 100%;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    .hairline('top', @Simplecode-divider-color);

    tr {
      width: 100%;
      padding: 0;
      margin: 0;

      .@{keyboardPrefixCls}-item {
        width: 25%;
        padding: 0;
        margin: 0;
        height: 50 * @hd;
        text-align: center;

        &:not(.keyboard-confirm) {
          .hairline('left', @Simplecode-divider-color);
          .hairline('bottom', @Simplecode-divider-color);
        }

        font-size: 24 * @hd;
        color: @color-text-main;
        font-weight: 400;
        position: relative;

        &.@{keyboardPrefixCls}-item-active {
          background-color: @fill-tap;
        }

        &.keyboard-confirm {
          background-color: @fill-base;
          height: 44 * @hd;
          .hairline('bottom', @Simplecode-divider-color);

          &.@{keyboardPrefixCls}-item-active {
            background-color: @keyboard-confirm-tap-color;
          }

          &.@{keyboardPrefixCls}-item-disabled {
            background-color: @keyboard-confirm-tap-color;
            color: rgba(255, 255, 255, 0.45);
          }
        }

        &.keyboard-delete {
          .encoded-svg-background('input_item_kb_backspace');
          background-size: 25.5 * @hd 18.5 * @hd;
          background-position: 50% 50%;
          background-repeat: no-repeat;
          background-color: @border-color-base;
        }

        &.keyboard-hide {
          .encoded-svg-background('input_item_kb_hide');
          background-size: 32.5 * @hd 23.5 * @hd;
          background-position: 50% 50%;
          background-repeat: no-repeat;
        }
      }

      .@{keyboardPrefixCls}-item-disabled {
        background-color: @custom-key-board-disabled;
      }
    }
  }
}

@keyframes keyboard-cursor {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}