@import '~scss/variables';
:global {
  .pipeline_status_icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: -2px;
    margin-right: 8px;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: 20px;
    vertical-align: middle;
  }
}

.queued {
  background-image: url('/assets/pipeline-queued.svg');
}

.running {
  animation: rotate 2s linear infinite;
  background-image: url('/assets/pipeline-running.svg');
}

.warning {
  background-image: url('/assets/pipeline-warning.svg');
}

.unstable {
  background-image: url('/assets/pipeline-warning.svg');
}

.failure,
.error {
  background-image: url('/assets/pipeline-error.svg');
}

.aborted,
.nostatus {
  background-image: url('/assets/pipeline-nostatus.svg');
}

.success {
  background-image: url('/assets/pipeline-success.svg');
  background-color: $green;
}

.paused {
  background-image: url('/assets/paused.svg');
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
