.lifecycle-chart {
  padding-top: 2rem;
  position: relative;

  .lifecycle-phases {
    position: absolute;
    top: 1.5em;
    bottom: 1.5em;
    right: 1.5em;
    left: 1.5em;

    .divider {
      position: absolute;
      height: 100%;

      stroke: $ui-gray-200;
      stroke-width: 3px;
      stroke-dasharray: 1, 7;
      stroke-dashoffset: 1;
      stroke-linecap: square;

      &.prestart {
        left: 25%;
      }

      &.poststop {
        left: 75%;
      }
    }
  }

  .lifecycle-phase {
    position: absolute;
    bottom: 0;
    top: 0;
    border-top: 2px solid transparent;

    .name {
      padding: 0.5rem 0.9rem;
      font-size: $size-7;
      font-weight: $weight-semibold;
      color: $ui-gray-500;
    }

    &.is-active {
      background: $white-bis;
      border-top: 2px solid $vagrant-blue;

      .name {
        color: $vagrant-blue;
      }
    }

    &.prestart {
      left: 0;
      right: 75%;
    }

    &.main {
      left: 25%;
      right: 0;
    }

    &.poststart {
      left: 40%;
      right: 0;
    }

    &.poststop {
      left: 75%;
      right: 0;
    }
  }

  .lifecycle-chart-rows {
    margin-top: 2.5em;
  }

  .lifecycle-chart-row {
    position: relative;

    .task {
      margin: 0.55em 0.9em;
      padding: 0.3em 0.55em;
      border: 1px solid $grey-blue;
      border-radius: $radius;
      background: white;

      .name {
        font-weight: $weight-semibold;

        a {
          color: inherit;
          text-decoration: none;
        }
      }

      &:hover {
        .name a {
          text-decoration: underline;
        }
      }

      .lifecycle {
        font-size: $size-7;
        color: $ui-gray-400;
      }
    }

    &.is-active {
      .task {
        border-color: $nomad-green;
        background: lighten($nomad-green, 50%);

        .lifecycle {
          color: $ui-gray-500;
        }
      }
    }

    &.is-finished {
      .task {
        color: $ui-gray-400;
      }
    }

    &.main {
      margin-left: 25%;
      margin-right: 0;
    }

    &.prestart-ephemeral {
      margin-right: 75%;
    }

    &.poststart-ephemeral,
    &.poststart-sidecar {
      margin-left: 40%;
    }

    &.poststart-ephemeral {
      margin-right: 10%;
    }

    &.poststop {
      margin-left: 75%;
    }

    &:last-child .task {
      margin-bottom: 0.9em;
    }
  }
}