@import "../../styles/mixins/common";
@import "variables";

$reqWidth: 56px;
$font-size: 18px;
.completed {
  background-color: $completed-blue;
}

.pending {
  background-color: $pending-gray;
}

.empty {
  background-color: $empty-grey;
}

.running {
  background-color: $running-green;
}

.counter-container {
  text-align: center;
  padding: 8px;
  .circle {
    display: inline-block;
    margin: auto;
    width: $reqWidth;
    height: $reqWidth;
    border-radius: 50%;
    margin-bottom: 8px;
    background-color: $blue-300;

    &.published {
      background-color: $neon-yellow;
    }
    &.in_progress {
      background-color: #50e3c2;
    }
    &.queued {
      background-color: #c4f0e4;
    }
    &.created {
      background-color: $blue-300;
    }
    &.failed {
      background-color: $failed-red;
    }
    &.stopped {
      background-color: $completed-blue;
    }
    &.completed {
      background-color: $completed-blue;
    }
    &.in_progress {
      background-color: $running-green;
    }
    &.closed {
      background-color: $pending-gray;
    }

    &.Caffe, &.PyTorch, &.Keras, &.Tensor.Flow, &.Custom {
      background-color: $blue-300;
    }
  }
  .counter-label {
    @include counter-label();
    text-transform: uppercase;
  }
}

.leave-space {
  min-height: 17px;
}
