@charset "UTF-8";
@import "../../theme/variables";
@import "~@jereation/sass-helpers/_mixins";

$layer-height: 2.2rem;
.vui-pull-to-refresh-layer {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
  @include translate3d(0, -100%, 0);
  color: #333;
  .vui-pull-to-refresh-arrow {
    width: 0.65rem;
    height: 1rem;
    background: no-repeat center;
    background-size: 0.65rem 1rem;
    z-index: 10;
    transform: rotate(0deg) translate3d(0, 0, 0);
    transition-duration: 300ms;
  }
  .vui-label-down, .vui-label-up, .vui-label-refresh {
    text-align: center;
  }
}

.vui-scroll-content {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  &:not(.refreshing) {
    .vui-pull-to-refresh-layer .vui-preloader {
      animation: none;
    }
  }
  &.refreshing {
    .vui-pull-to-refresh-arrow {
      visibility: hidden;
      transition-duration: 0ms;
    }
    .vui-preloader {
      visibility: visible;
    }
  }
  &.vui-pull-up {
    .vui-pull-to-refresh-arrow {
      transform: rotate(180deg) translate3d(0, 0, 0);
    }
  }
  &.vui-pull-down .vui-label-down,
  &.vui-pull-up .vui-label-up,
  &.vui-refreshing .vui-label-refresh {
    display: block;
  }

  &.vui-has-footer > .vui-scroll {
    position: relative;
    padding-bottom: 3.2rem;
  }
}

.vui-scroll {
  @include user-select(none);
  @include text-size-adjust(none);
  &.vui-scroll-transition {
    @include transition-property(transform);
    @include transition-duration(200ms);
  }
}

.vui-infinite-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px 0 10px;
  color: #333;
  .vui-label-refresh {
    opacity: 0;
    @include transition-property(opacity);
    @include transition-duration(100ms);
  }
  &.vui-infinite-loading {
    .vui-label-refresh {
      opacity: 1;
    }
  }
}