.sui-prj-status {
  $this: &;

  @extend %suBadgeBase;

  @include suiStatusColor();

  // -------------------------
  //    Colors
  // -------------------------
  &.as--awaiting,
  &.as--stopped,
  &.as--created,
  &.as--unknown {
    @include suiStatusColor(
      $background: $sui-prj-color-status-awaiting-light,
      $color: $sui-prj-color-status-awaiting-dark,
    );
  }

  &.as--requested {
    @include suiStatusColor(
      $background: $sui-prj-color-status-requested-light,
      $color: $sui-prj-color-status-requested-dark,
    );

    #{$this}__dot {
      &::before {
        animation: popStatusDot 2s ease infinite;
      }
    }
  }

  &.as--queued {
    @include suiStatusColor(
      $background: $sui-prj-color-status-queued-light,
      $color: $sui-prj-color-status-queued-dark,
    );

    #{$this}__dot {
      &::before {
        animation: popStatusDot 2s ease infinite;
      }
    }
  }

  &.as--running {
    @include suiStatusColor(
      $background: $sui-prj-color-status-running-light,
      $color: $sui-prj-color-status-running-dark,
    );

    #{$this}__dot {
      &::before {
        animation: popStatusDot 2s ease infinite;
      }
    }
  }

  &.as--succeeded,
  &.as--up {
    @include suiStatusColor(
      $background: $sui-prj-color-status-succeeded-light,
      $color: $sui-prj-color-status-succeeded-dark,
    );
  }

  &.as--stopping {
    @include suiStatusColor(
      $background: $sui-prj-color-status-stopping-light,
      $color: $sui-prj-color-status-stopping-dark,
    );

    #{$this}__dot {
      &::before {
        animation: popStatusDot 2s ease infinite;
      }
    }
  }

  &.as--stopped {
    @include suiStatusColor(
      $background: $sui-prj-color-status-stopped-light,
      $color: $sui-prj-color-status-stopped-dark,
    );
  }

  &.as--failed,
  &.as--down {
    @include suiStatusColor(
      $background: $sui-prj-color-status-failed-light,
      $color: $sui-prj-color-status-failed-dark,
    );
  }

  &.as--skipped {
    @include suiStatusColor(
      $background: $sui-prj-color-status-skipped-light,
      $color: $sui-prj-color-status-skipped-dark,
    );
  }

  &.as--out_of_memory {
    @include suiStatusColor(
      $background: $sui-prj-color-status-out-of-memory,
      $color: $sui-prj-color-status-out-of-memory-light,
    );
  }

  &__dot {
    position: relative;
    width: rem(6);
    height: rem(6);
    display: inline-block;
    border-radius: rem(6);
    background-color: currentColor;
    margin-left: $sui-space-xs;
    margin-bottom: rem(1);

    &::before {
      content: '';
      display: block;
      position: absolute;
      background-color: currentColor;
      width: rem(6);
      height: rem(6);
      border-radius: rem(6);
    }
  }
}

@keyframes rotating {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes pulse-opacity {
  from { opacity: 0.66; }
  to { opacity: 0.33; }
}

@keyframes slidein {
  from { margin-left: -30%; }
  to { margin-left: 70%; }
}

.sui-prj-spiner-animation {
  transform-origin: 50% 50%;
  animation: rotating 2s linear infinite;
}

.sui-prj-pulse-opacity-animation {
  animation: pulse-opacity 2s linear infinite;
}

.sui-prj-slidein-animation {
  animation: 0.5s linear infinite alternate slidein;
}