@include b(login-extend) {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

  @include e(verification) {
    .ivu-form-item-content {
      display: flex;
    }
    .ivu-form-item-content .ivu-btn.ivu-btn-default {
      margin-left: 20px;
      margin-top: 0;
    }
    .ivu-input-type-number {
      height: 40px;
      line-height: 40px;
      .ivu-input {
        -moz-appearance: textfield;
        height: 40px;
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
      }
    }
  }

  @include e(password) {
    input {
      -webkit-text-security: disc;
    }
    @include when('show-pwd') {
      input {
        -webkit-text-security: unset;
      }
    }
  }
}

@media screen and (max-width: 720px) {
  @include b(login-extend) {
    align-items: center;
  }
}

@include b(login-extend-box) {
  width: 430px;
  margin-top: 130px;
  background: #fff;
  overflow: hidden;
}

@media screen and (max-width: 720px) {
  @include b(login-extend-box) {
    width: 340px;
    margin-top: 0;
  }
}

@include b(login-extend-box-header) {
  background: #ccccff;

  > img {
    display: block;
    width: 430px;
    margin: 0 auto;
    user-select: none;
  }
}

@include b(login-extend-box-main) {
  position: relative;

  @include e(avatar) {
    display: block;
    position: absolute;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 4px solid #fff;
    top: -50px;
    right: 175px;
    z-index: 2;
    user-select: none;
  }
}

@include b(login-extend-box-main-content) {
  padding: 100px 40px 40px;

  .ivu-input {
    outline: none;
    border-color: #dcdfe6;
    font-size: 14px;

    &:hover {
      border-color: #c0c4cc;
    }
    &:focus {
      border-color: #409eff;
      box-shadow: none;
    }
  }

  .ivu-form-item-error .ivu-input {
    border-color: #f56c6c;
  }

  .ivu-form-item-error-tip {
    padding-top: 4px;
    font-size: 12px;
    color: #f56c6c;
  }

  .ivu-form-item .ivu-btn {
    display: block;
    height: 40px;
    margin-top: 15px;
    color: #fff;
    background: #409eff;
    border-color: #409eff;

    &:focus {
      background: #79bbff;
      border-color: #79bbff;
      box-shadow: none;
    }

    &:hover {
      background: #79bbff;
      border-color: #79bbff;
    }

    &:active {
      background: #337ecc;
      border-color: #337ecc;
    }

    &.is-disabled {
      background-color: #e5e8ec;
      border-color: #e5e8ec;
      color: #b3bbc6;
    }
  }

  .ivu-input-wrapper-large {
    .ivu-input-icon,
    .ivu-input-prefix i,
    .ivu-input-suffix i {
      font-size: 16px;
    }
  }

  .ivu-form-item {
    margin-bottom: 22px;
  }

  .ivu-form {
    position: relative;
    & > .ivu-btn {
      position: absolute;
      right: 0;
      bottom: 44px;
      color: getCssVar(color, primary);
      box-shadow: none;
    }
    & > .ivu-btn:hover {
      background-color: transparent;
    }
  }
}
