@import "variables";

:host {

  .status-line {
    background: white;
    height:32px;
    position: relative;
    .label {
      display: flex;
      justify-content: center;
      padding: 2px 12px 0 12px;
      letter-spacing: 0.03em;
    }
    .view-only {
      padding-left: 4px;
      margin-top: 0;
      margin-bottom: 0;
    }
    &::before {
      content: "";
      border-top: 6px solid;
      display: block;
      position: relative;
      z-index: 2;
    }
    > span {
      display: inline-flex;
      align-items: center;
      position: absolute; z-index: 1; top: 0; left: 50%;
      transform: translateX(-50%);
      height: inherit;
      font-size: 12px; font-weight: 500;
      letter-spacing: 0.05em;
      color: $blue-600;
      &::before, &::after {
        content:"";
        display: block;
        position: relative;
        width: 0;
        height: 0;
        border-bottom: 34px solid white;
      }
      &::before {
        left: -1px;
        border-right: 16px solid transparent;
      }
      &::after {
        right: -1px;
        border-left: 16px solid transparent;
      }

    }

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

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

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

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

    &.failed {
      &::before {border-color: $strong-red}
      span {background-color: $strong-red; color: $blue-25;}
    }

    &.completed, &.stopped {
      &::before {border-color: $completed-blue}
      span {background-color: $completed-blue; color: $blue-25;}
    }
  }
}


