@import '../styles/mixins/index.less';
@import '../styles/themes/index.less';

.@{wux-prefix}-loading {
  position: fixed;
  z-index: @z-index-toast;
  top: 50%;
  left: 50%;
  background: @toast-bg;
  font-size: @font-size-base;
  line-height: @line-height-base;
  text-align: center;
  border-radius: @border-radius-base;
  color: @text-color-inverse;
  transform: translate3d(-50%, -50%, 0);

  &__content {
    min-width: 118px;
    padding: 9px 15px;
    box-sizing: border-box;

    &--has-icon {
      padding: 15px;

      .@{wux-prefix}-loading__text {
        margin-top: 6px;
      }
    }
  }

  &__icon {
    margin: 0;
    display: block;

    &--loading {
      display: inline-block !important;
      vertical-align: middle;
      animation: loading 1s steps(12, end) infinite;

      .encoded-svg-background(loading);

      background-repeat: no-repeat;
      background-size: 100%;
      margin: 5px 0 0 !important;
      width: 38px;
      height: 38px;
      vertical-align: baseline;
    }
  }
}

@keyframes loading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}