@import "../../../style/mixin.less";

.@{prefix}-pull-refresh {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
        display: none;
    }

    &.is-disabled,
    &-content,
    &-content-wrapper {
        .use-var(background, pull-refresh-content-background-color);
    }

    &-content {
        min-height: 100%;
    }

    &.is-ios &-content-wrapper {
        list-style-type: none;
        padding: 0;
        padding-bottom: 1PX;
        margin: 0;
        min-height: 100%;
        box-sizing: content-box;
        transform: translateZ(0);
    }

    &-label {
        position: absolute;
        display: flex;
        width: 100%;
        height: fit-content;
        justify-content: center;
        align-items: center;
        z-index: -1;
        .use-var(font-size, pull-refresh-label-font-size);
        .use-var(background, pull-refresh-label-background-color);
    }

    &-label-wrapper {
        position: absolute;
        left: 0;
        width: 100%;
        overflow-y: auto;
    }

    &-place {
        position: relative;
        height: 100%;
    }

    &-label-text {
        display: flex;
        .rem(font-size, 14);
        .rem(line-height, 44);
        .use-var(color, pull-refresh-label-text-color);
        .set-loading-color-var(pull-refresh-label-loading-color);
        align-items: center;
        .@{prefix}-loading + span {
            .rem-with-rtl(margin-left, 10);
        }
    }

    &.is-android &-label {
        top: 0;
        transform: translateY(-100%);
    }

    &.is-ios &-label {
        position: absolute;
        bottom: 0;
        overflow-y: auto;
        .rem(font-size, 14);

        &-wrapper {
            will-change: height;
            z-index: -1;
        }
    }
}

/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
& when (@use-dark-mode = 1) {
    
  .process-bg-color-with-config,
  .process-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(color, dark-steps-process-with-config-item-icon-color);
      .use-var(color, dark-steps-process-with-config-item-icon-color);
    }
  }
  .wait-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
    }
  }
  .@{prefix}-pull-refresh {
    &.is-disabled,
    &-content,
    &-content-wrapper {
      @{arco-dark-mode-selector} & {
        .use-var(background, dark-pull-refresh-content-background-color);
      }
    }
    &-label {
      @{arco-dark-mode-selector} & {
        .use-var(background, dark-pull-refresh-label-background-color);
      }
    }
    &-label-text {
      @{arco-dark-mode-selector} & {
        .use-var(color, dark-pull-refresh-label-text-color);
        .set-loading-color-var(dark-pull-refresh-label-loading-color);
      }
    }
  }
}
/********************* End *************************/