@import "variables";

:host {
  display: grid;
  grid-template-columns: 14px 70px;
  align-items: center;
  grid-gap: 4px;

  &.show-spinner {
    grid-template-columns: 14px 70px 18px;
  }

  &.hide-label {
    grid-template-columns: 14px;
  }

  &.created, &.queued {
    color: $grey-purple
  }

  &.completed, &.Final {
    color: $completed-blue;

  }
  &.aborted {
    color: $completed-blue;
  }
  &.running {
    color: $running-green;
  }

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

  &.in_progress, &.Uploading {
    color: $running-green;
  }

  &.published {
    color: $neon-yellow;
    line-height: 23px;
  }

  &.closed {
    color: $blue-sky;
  }

  &.stopped {
    color: $blue-sky;
  }
}

.icon {
  min-width: 10px;
}

.label {
  line-height: 18px;

  &.with-spinner {
    min-width: 50px;
  }
}

:host-context(.light-theme) {
  .published {
    color: darken($neon-yellow, 10%);
    .icon.i-published{
      filter: brightness(0.8)
    }
  }
}

:host-context(.selected) {
  :host {
    color: $blue-50;
    filter: brightness(0) invert(1);
  }
}

.middle {
  height: 14px;
}

.spinner {
  opacity: 0;

  .show {
    opacity: 1;
  }
}
