@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

:root,
:host {
  --xzx-pull-refresh-head-height: 50px;
  --xzx-pull-refresh-head-font-size: var(--xzx-text-sm);
  --xzx-pull-refresh-head-text-color: var(--xzx-text-color-2);
}

@include b(pull-refresh) {
  &__track {
    position: relative;
    height: 100%;
    transition-property: transform;
  }

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