@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;

.tui-place-holder {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;

  .tui-place-holder__icon {
    margin: 10px;
  }

  .tui-place-holder__label {
    @include theme() {
      color: get(text-color-secondary);
    }
    font-weight: 400;
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font-family: PingFangSC-Medium;
    font-size: 16px;
    line-height: 22px;
  }

  .tui-place-holder__button {
    margin: 20px;
    @include theme() {
      background-color: get(button-color-primary-default);
      color: get(text-color-button);
    }
    border-radius: 31px;
    cursor: pointer;
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font-family: PingFangSC-Medium;
    font-size: 14px;
    line-height: 20px;
    padding: 12px 36px;
    text-align: center;
    user-select: none;
  }
}

.tui-place-holder-loading {
  cursor: wait;
  animation: circle infinite 1s linear;
}

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

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