$press-code-input-cursor-width: 1px;
$press-code-input-cursor-height: 40%;
$press-code-input-cursor-animation-duration: 1s;
$press-code-input-cursor-animation-name: press-cursor-flicker;

.press-code-input {
  display: flex;
  position: relative;
  overflow: hidden;

  &__item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    &__text {
      font-size: 15px;
      color: #606266;
    }

    &__dot {
      width: 7px;
      height: 7px;
      border-radius: 100px;
      background-color: #606266;
    }

    &__line {
      position: absolute;
      bottom: 0;
      height: 4px;
      border-radius: 100px;
      width: 40px;
      background-color: #606266;
    }

    /* #ifndef APP-PLUS */
    &__cursor {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: $press-code-input-cursor-width;
      height: $press-code-input-cursor-height;
      animation: $press-code-input-cursor-animation-duration
        press-cursor-flicker infinite;
    }

    /* #endif */
  }

  &__input {
    // 之所以需要input输入框，是因为有它才能唤起键盘
    // 这里将它设置为两倍的屏幕宽度，再将左边的一半移出屏幕，为了不让用户看到输入的内容
    position: absolute;
    left: -750px;
    width: 1500px;
    top: 0;
    background-color: transparent;
    text-align: left;
    border: 0;
    outline: none;

    &--disabled {
      pointer-events: none;
    }
  }
}

/* #ifndef APP-PLUS */
@keyframes press-cursor-flicker {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* #endif */