@import '../../../../../app/assets/stylesheets/page_bundles/pipeline';

/**
 * Cross-project pipelines (applied conditionally to pipeline graph)
 */
.upstream-pipeline {
  margin-right: 84px;
}

.linked-pipelines-column.stage-column {
  position: relative;

  > ul {
    padding: 0;
  }

  &.graph-position-left {
    margin-right: 36px;

    .cross-project-triangle {
      right: -42px;
    }
  }

  &.graph-position-right {
    margin-left: 60px;

    .cross-project-triangle {
      left: -64px;
    }

    // reset connectors for the downstream pipeline
    .linked-pipeline.build {
      .curve::before,
      &::after {
        content: '';
        width: 0;
        border: 0;
      }
    }
  }

  .linked-pipeline.build {
    height: 42px;

    &::before {
      content: none;
    }

    // apply custom dimensions to connector before and after for triangle arrow
    &.flat-connector-before {
      @include flat-connector-before($linked-project-column-margin);
    }

    &.active {
      .linked-pipeline-content,
      .linked-pipeline-content:hover,
      .linked-pipeline-content:focus {
        background-color: $blue-100;
      }

      &.left-connector {
        @include flat-connector-before(88px);
      }

      &::after {
        content: '';
        position: absolute;
        top: 48%;
        right: -88px;
        border-top: 2px solid $border-color;
        width: 88px;
        height: 1px;
      }
    }

    &.downstream-pipeline {
      height: 86px;
    }

    .linked-pipeline-content {
      @include build-content(0);
      text-align: inherit;
      min-height: 42px;
    }
  }
}

.stage-column.has-upstream {
  .left-connector {
    @include flat-connector-before(60px);
  }

  &.has-only-one-job {
    margin-left: 30px;
    margin-right: 0;

    .left-connector {
      @include flat-connector-before;
    }
  }
}

.stage-column.has-downstream {
  margin-right: $linked-project-column-margin;

  &.has-only-one-job:not(:first-child) {
    margin-right: 36px;

    .left-connector {
      @include flat-connector-before;
    }
  }

  .build {
    &:first-child {
      &::after {
        right: -$linked-project-column-margin;
        width: $linked-project-column-margin;
      }
    }
  }
}

.cross-project-triangle {
  position: absolute;
  top: 50px;
  width: 0;
  height: 0;
  border-bottom: 7px solid transparent;
  border-top: 7px solid transparent;
  border-left: 7px solid $gray-darkest;
  font-size: 0;
  line-height: 0;
  z-index: 10;
}

.project-name-pipeline-id-separator {
  display: inline-block;
  margin: 4px 2px 0;
  font-size: 10px;
  vertical-align: top;
}
