@import '@styles/mixin.scss';

:host {
  --load-more-height: 100rpx;
  --load-more-bg: transparent;
  --load-more-loading-size: 32rpx;
  --load-more-loading-border-width: 4rpx;
  --load-more-loading-border-color: #e9eaec;
  --load-more-loading-border-active-color: var(--color-primary);
  --load-more-text-font-size: 24rpx;
  --load-more-text-color: #ccc;
  --load-more-line-width: 100rpx;
  --load-more-line-color: #d1d3d7;
}

.load-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--load-more-height);
  background-color: var(--load-more-bg);

  &--loading {
    display: flex;
    margin-left: 12rpx;
  }

  &--text {
    margin: 0 12rpx;
    font-size: var(--load-more-text-font-size);
    color: var(--load-more-text-color);
    vertical-align: middle;
  }

  &--line {
    position: relative;
    width: var(--load-more-line-width);

    &::after {
      @include hairline(var(--load-more-line-color));
      border-top-width: 1px;
    }
  }
}

.rotate {
  width: var(--load-more-loading-size);
  height: var(--load-more-loading-size);
  border-color: var(--load-more-loading-border-color) var(--load-more-loading-border-color)
    var(--load-more-loading-border-color) var(--load-more-loading-border-active-color);
  border-style: solid;
  border-width: var(--load-more-loading-border-width);
  border-radius: 50%;
  animation: rotate 0.5s linear infinite;
}

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

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