.pipeline-container {
  display: flex;
  height: 100%;
  background-color: #fff;

  &__workflow {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;

    &__top {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      height: 52px;
      padding: 0 20px;
      background: #ffffff;
      box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
    }

    &__graph {
      width: 100%;
      height: calc(100% - 52px);
      background-color: @background-color;
      background-image: url(@/assets/img/pipeline-canvas-bg.png);
      background-size: 100% 100%;
    }
  }
}

:global {
  .pipeline-context-menu {
    width: 78px;
    padding: 10px 0;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 0px 6px rgba(40, 84, 168, 0.21);

    &__item {
      display: flex;
      align-items: center;
      width: 100%;
      height: 34px;
      padding-left: 12px;
      color: @text-color-secondary;
      font-size: 15px;
      cursor: pointer;

      &:hover {
        color: #0d5ef8;
        font-weight: 500;
        background-color: .addAlpha(#8895a8, 0.11) [];
      }

      &__icon {
        width: 1em;
        height: 1em;
        margin-right: 9px;
        fill: currentColor;
      }
    }
  }
}
