@transition-duration: 0.2s;
@height: 80px;
@fontSize: 28px;
@fontColor: #999;

.pull-load {
  position: relative;
  -webkit-overflow-scrolling: touch;

  &-block {
    overflow-y: scroll;
  }

  &-state-refreshing .pull-load-body {
    transition: transform @transition-duration;
    transform: translate3d(0, @height, 0);
  }

  &-state-refreshed .pull-load-body {
    transition: transform @transition-duration;
    transform: translate3d(0, @height, 0);
  }

  &-state-reset .pull-load-body {
    transition: transform @transition-duration;
  }
}

.pull-load-body {
  position: relative;
}

.pull-load-header {
  position: absolute;
  width: 100%;
  transform: translate3d(0, -100%, 0);
}

// .pull-load-footer {}

.pull-load-header-default,
.pull-load-footer-default {
  display: flex;
  align-items: center;
  justify-content: center;
  height: @height;
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: @fontSize;
  font-weight: 400;
  line-height: 40px;
  color: @fontColor;
}