@import "../../styles/themes/variable.scss";

#{$xh-prefix}-amount-input {
  display: flex;
  padding: 0 40px;
  font-family: PingFangSC, PingFang SC;
  flex-direction: column;
  background-color: #fff;

  &-title {
    font-size: 24px;
    color: #666666;
    line-height: 1.5;
    padding: 28px 0 0;
  }

  &-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 32px 0;
    border-bottom: 2px solid #eee;
    align-items: baseline;
    position: relative;

    &-unit {
      font-size: 36px;
    }

    &-amount {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      line-height: 1;
      // height: 128px;
      position: relative;

      &-num {
        font-size: 64px;
        display: flex;
        align-items: center;
        // font-family: Bebas Neue-Bold, Bebas Neue;
        font-family: DIN Alternate;
        color: #333;
        font-weight: bold;

        &-key {
          display: inline-block;
        }

        &-placeholder {
          font-size: 28px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #b9b9b9;
          position: absolute;
          left: 32px;
        }

        &-cursor {
          &.focus {
            width: 4px;
            height: 50px;
            background-color: var(--color-primary);
            display: inline-block;
            margin-left: 4px;
            animation: CursorShine 1s linear infinite;
          }
        }
      }

      &-shortcut {
        &-text {
          padding: 0 20px;
          height: 58px;
          display: flex;
          align-items: center;
          font-size: 26px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: var(--color-primary);
          border-radius: 30px;
          border: 2px solid var(--color-primary);
        }
      }
    }

    &-error {
      font-size: 20px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: var(--color-fail);
      margin-top: 8px;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  &-slot {
    margin-top: 8px;
  }

  &-bottom {
    color: #999;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;

    &-range {
      font-size: 26px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;

      &-number {
        color: #333;
        display: inline-block;
      }
    }

    &-tip {
      font-size: 24px;

      &-update {
        display: inline-block;
        color: #4739DF;
      }
    }
  }
}

@keyframes CursorShine {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}