@import "variables";
@import "../../layout/layout.scss";

.progress-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px rgba(2, 2, 2, 0.07);
  width: 100%;
  height: $project-info-progress-height;
  opacity: 1;
  text-align: center;
  color: #596386;
  font-weight: 500;
  font-size: 11px;
  background-color: #FFFFFF;
  transition: $transition-fast;


  &.published {
    background-color: $neon-yellow;
  }

  &.in_progress {
    background-color: #50e3c2;
  }

  &.queued {
    background-color: #c4f0e4;
  }

  &.created {
    background-color: #dbdee6;
  }

  &.failed {
    background-color: $strong-red;
  }

  &.completed, &.stopped {
    background-color: $completed-blue;
  }
}
