@import '../../style/theme/default.less';

@loading-prefix-cls: ~'@{kui-prefix}-loading';

.@{loading-prefix-cls} {
  display: inline-block;
  font-size: 0;

  &-block {
    display: block;
    text-align: center;
  }

  &-vertical &-spinner {
    display: block;
    margin: 0 auto;
  }

  /* prettier-ignore */
  &-horizontal &-text {
    margin-left: 8PX;
  }

  /* prettier-ignore */
  &-vertical &-text {
    margin-top: 8PX;
  }

  /* prettier-ignore */
  &-spinner {
    position: relative;
    display: inline-block;
    width: 20PX;
    height: 20PX;
    vertical-align: middle;
    background-color: transparent;
    background-image: url('./loading.svg');
    background-size: 100%;
    animation: ~'@{loading-prefix-cls}-icon' 0.8s steps(12) infinite;
  }

  @keyframes ~'@{loading-prefix-cls}-icon' {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  /* prettier-ignore */
  &-text {
    display: inline-block;
    font-size: 14PX;
    color: #666;
    vertical-align: middle;
  }
}