@import './var.less';

:root {
  --glm-pull-refresh-head-height: @pull-refresh-head-height;
  --glm-pull-refresh-head-font-size: @pull-refresh-head-font-size;
  --glm-pull-refresh-head-text-color: @pull-refresh-head-text-color;
  --glm-pull-refresh-loading-icon-size: @pull-refresh-loading-icon-size;
}

.glm-pull-refresh {
  overflow: hidden;

  &__track {
    position: relative;
    height: 100%;
    transition-property: transform;
  }

  &__head {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--glm-pull-refresh-head-height);
    overflow: hidden;
    color: var(--glm-pull-refresh-head-text-color);
    font-size: var(--glm-pull-refresh-head-font-size);
    line-height: var(--glm-pull-refresh-head-height);
    text-align: center;
    transform: translateY(-100%);
  }

  &__loading {
    .glm-loading__spinner {
      width: var(--glm-pull-refresh-loading-icon-size);
      height: var(--glm-pull-refresh-loading-icon-size);
    }
  }
}