$border-color: var(--pf-global--BorderColor--light-100);
$gutter: 1.7em;

.odc-pipeline-vis-graph {
  margin: var(--pf-global--spacer--md) 0;
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  font-size: 12px;

  // reset
  &__stage-column {
    list-style: none;
    padding: 0;
  }

  &__stages {
    display: inline-flex;
    background: var(--pf-global--BackgroundColor--300);
    border-radius: 20px;
    padding: 20px;
  }

  &__stage {
    margin: 0 16px;

    &:not(:first-child) {
      &:not(.is-parallel) {
        & .odc-pipeline-vis-task:first-child {
          &::before {
            left: 0px;
            width: 33px;
            transform: translateX(-100%);
          }
        }
      }
      &.is-parallel {
        & .odc-pipeline-vis-task {
          &:first-child {
            &::before {
              content: '';
              position: absolute;
              top: 1.25em;
              border-top: 1px solid $border-color;
              width: $gutter;
              height: 0;
            }
            &::before {
              left: 0;
              width: 33px;
              transform: translateX(-100%);
            }
          }
        }
      }
      & .odc-pipeline-vis-task:first-child {
        &::before {
          content: '';
          position: absolute;
          top: 1.25em;

          border-top: 1px solid $border-color;
          width: $gutter;
          height: 0;
        }
      }
      & .odc-pipeline-vis-task {
        &__connector {
          display: none;
          &::after {
            content: '';
            width: 0.67em;
            height: 1.2em;
            position: absolute;
            top: -2.75em;
            border-top: 1px solid $border-color;
            left: -17px;
            border-right: 1px solid var(--pf-global--BorderColor--light-100);
            border-radius: 0 20px;
          }
        }
        &:not(:first-child) {
          //connect each task
          &::before {
            content: '';
            border-radius: 0 0 0 1.33em;
            top: -4.33em;
            position: absolute;
            border-bottom: 1px solid var(--pf-global--BorderColor--light-100);
            width: 10px;
            height: 5.75em;
          }
          // Left connecting lines
          &::before {
            left: -10px;
            border-left: 1px solid $border-color;
            border-radius: 0 0 0 12px;
          }
        }
        &:nth-child(2) {
          .odc-pipeline-vis-task__connector {
            display: block;
          }
          &::before {
            top: -1.9em;
            height: 3.3em;
          }
        }
      }
    }
    &:not(:last-child) {
      &.is-parallel {
        & .odc-pipeline-vis-task {
          &:first-child {
            &::after {
              right: 0;
              transform: translateX(100%);
            }
          }
        }
      }
      & .odc-pipeline-vis-task {
        &__connector {
          display: none;
          &::before {
            content: '';
            width: 0.67em;
            height: 1.2em;
            position: absolute;
            top: -2.75em;
            border-top: 1px solid $border-color;
            right: -17px;
            border-left: 1px solid var(--pf-global--BorderColor--light-100);
            border-radius: 20px 0 0;
          }
        }
        //connect each task
        &:not(:first-child) {
          &::after {
            content: '';
            border-radius: 0 0 0 1.33em;
            top: -4.33em;
            position: absolute;
            border-bottom: 1px solid var(--pf-global--BorderColor--light-100);
            width: 10px;
            height: 5.75em;
          }

          // Right connecting lines
          &::after {
            right: -10px;
            border-right: 1px solid $border-color;
            border-radius: 0 0 12px;
          }
        }
        &:nth-child(2) {
          .odc-pipeline-vis-task__connector {
            display: block;
          }
          &::after {
            top: -1.9em;
            height: 3.3em;
          }
        }
      }
    }
    &:last-child {
      & .odc-pipeline-vis-task:first-child {
        &::after {
          content: '';
          width: $gutter / 2 + 0.05;
        }
      }
    }
  }
}
