.#{$load-and-refresh-prefix-cls} {
  // overflow: scroll;
  position: relative;

  &__wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  &__content {
    transition: transform $transition-time;
    transform-origin: left top 0;
  }

  &__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: $load-and-refresh-indicator-height;
    margin-top: -$load-and-refresh-indicator-height;
    transition: all .5s;

    .#{$load-and-refresh-prefix-cls}__icon {
      width: $loading-spinner-width;
      // margin-right: $load-and-refresh-indicator-icon-margin-x;
      color: $gray-11;
      text-align: center;
    }

    .#{$load-and-refresh-prefix-cls}__text {
      font-size: $load-and-refresh-indicator-text-font-size;
      color: $gray-11;
    }


    &--bottom {
      height: $load-and-load-indicator-height;
      // margin-top: 0;
      // margin-bottom: -$load-and-load-indicator-height;
      margin: 0 auto;
    }

  }
}

.refresh-icon {
  position: relative;
  display: inline-block;
  width: $refresh-icon-size;
  height: $refresh-icon-size;
  line-height: $refresh-icon-size;
  text-align: center;
  vertical-align: middle;
  background-color: $gray-6;
  border-radius: 50%;

  &__drag {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    content: "";
    background-color: inherit;
    border-radius: $refresh-icon-size/2 $refresh-icon-size/2  0 0;
    transition: all $transition-time;
    transform-origin: bottom;
  }

  &::after {
    @extend %aid-icon;
    font-size: $font-size-lg;
    color: $white;
    content: "\F6AC";
  }

  &--bottom {
    .refresh-icon__drag {
      top: 50%;
      bottom: auto;
      border-radius: 0 0 $refresh-icon-size/2 $refresh-icon-size/2;
      transform-origin: top;
    }
  }
}