.yml-chart-node {
  &.pipeline-node {
    width: 100%;
    height: 100%;
    padding: 0 12px;
    background-color: $white;
    border-radius: $radius;
    cursor: pointer;
    @extend %shallow-shadow;

    &:hover {
      @extend %hover-shadow;
    }

    .pipeline-title {
      display: flex;
      border-bottom: 1px solid $color-border;

      .title-icon {
        width: 40px;
        height: 40px;

        > img {
          width: 100%;
          height: 100%;
        }
      }

      .title-txt {
        flex: 1;
        width: 0;

        .name {
          line-height: 24px;
        }

        .type {
          line-height: 20px;
        }
      }
    }

    .pipeline-content {
      height: 0;
      overflow-x: auto;
      color: $color-dark-6;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: 0;

      &.flex-1 {
        line-height: 24px;
      }

      .object-key {
        display: block;
        color: $color-dark-8;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0;
      }

      .object-value {
        display: block;
        padding-left: 8px;
        white-space: nowrap;
      }
    }
  }
}
