/**
 * Refreshcontrol Component Style for SaltUI
 * @author xiaohe.wp
 * 
 * Copyright 2018-2019, SaltUI Team.
 * All rights reserved.
 */
.{$prefix}-refresh-control {
  position: relative;

  &-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 74px;
    opacity: 0;

    .refresh-svg-icon {
      width: 20px;
      height: 20px;

      svg {
        width: 100%;
        height: 100%;
      }
    }

    .refresh-text {
      margin-left: 10px;
      font-size: 12px;
    }
  }

  &.refreshing .refresh-svg-icon {
    animation: loading 2s infinite linear;
  }

  &-area {
    transition: transform 0.15s;
    transform: translate3d(0, 0, 0);
  }

  &.draging &-area {
    transition-duration: 0.1s;
  }

  &.dragAnimate &-area {
    transition-duration: 0.45s;
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}