.#{$ns}StatusField {
  white-space: nowrap;
  display: inline-flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;

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

  @keyframes animation-rolling_red {
    0% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(20px);
    }

    100% {
      transform: translateX(0);
    }
  }

  @keyframes animation-rolling_blue {
    0% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(-20px);
    }

    100% {
      transform: translateX(0);
    }
  }

  svg.#{$ns}Status-icon {
    width: $Satus-icon-width;
    height: $Satus-icon-height;
    top: 0;
  }

  .#{$ns}Status-icon {
    &.rolling {
      width: 30px;
      height: 10px;
      display: inline-block;
      vertical-align: middle;
      position: relative;

      &::before {
        content: '';
        display: inline-block;
        border: 5px solid $danger;
        border-radius: 500px;
        position: absolute;
        top: 0;
        left: 0;
        animation: animation-rolling_red 2s;
        animation-iteration-count: infinite;
      }

      &::after {
        content: '';
        display: inline-block;
        border: 5px solid $primary;
        border-radius: 500px;
        position: absolute;
        top: 0;
        left: 20px;

        animation: animation-rolling_blue 2s;
        animation-iteration-count: infinite;
      }
    }

    &.icon-warning {
      color: $warning;
    }
  }

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

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

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

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