.#{$ns}StatusField {
  white-space: nowrap;

  &-label {
    font-size: $fontSizeSm;
    margin-left: $gap-sm;
  }

  @keyframes animation-rolling_red {
    0% {
      left: 0;
    }

    50% {
      left: px2rem(13px);
    }

    100% {
      left: 0;
    }
  }

  @keyframes animation-rolling_blue {
    0% {
      left: $gap-sm + $gap-base;
    }

    50% {
      left: px2rem(12px);
    }

    100% {
      left: $gap-sm + $gap-base;
    }
  }

  .#{$ns}Status-icon {
    &--danger,
    &--primary,
    &--rolling,
    &--success,
    &--warning {
      &::before {
        font-family: 'iconfont';
        content: '\e632';
        font-style: normal;
      }
    }

    &--rolling {
      color: $warning;
      position: relative;
      left: $gap-md;

      &::before {
        font-size: inherit;
        color: $danger;
        position: absolute;
        left: 0;
        top: px2rem(1px);
        margin-left: px2rem(-27px);
        animation: animation-rolling_red 2s;
        animation-iteration-count: infinite;
      }

      &::after {
        font-family: 'iconfont';
        content: '\e632';
        font-style: normal;
        font-size: inherit;
        color: $primary;
        position: absolute;
        left: $gap-sm + $gap-base;
        top: px2rem(1px);
        margin-left: px2rem(-39px);
        animation: animation-rolling_blue 2s;
        animation-iteration-count: infinite;
      }
    }

    &--success {
      &::before {
        color: $success;
      }
    }

    &--danger {
      &::before {
        color: $danger;
      }
    }

    &--warning {
      &::before {
        color: $warning;
      }
    }

    &--primary {
      &::before {
        color: $primary;
      }
    }
  }

  .#{$ns}Status-icon--rolling + &-label {
    color: $warning;
    position: relative;
    left: $gap-md;
  }

  .#{$ns}Status-icon--success + &-label {
    color: $success;
  }

  .#{$ns}Status-icon--danger + &-label {
    color: $danger;
  }

  .#{$ns}Status-icon--warning + &-label {
    color: $warning;
  }

  .#{$ns}Status-icon--primary + &-label {
    color: $primary;
  }
}