.bi.bi-diagram {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 0.07rem solid #dae1e7;
  border-radius: 0.25rem;
  box-shadow: 0 0.8rem 1rem -0.2rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.5rem -0.02rem rgba(0, 0, 0, 0.05);
  min-height: 100%;
  background-color: #f8fafc;
  position: relative;
  overflow: hidden;

  // ----------------------------
  // Diagram node general wrapper
  // ----------------------------
  .bi.bi-diagram-node {
    box-sizing: content-box;
    position: absolute;
    z-index: 50;
    user-select: none;

    .bi-port-wrapper {
      display: flex;

      .bi-input-ports,
      .bi-output-ports {
        flex: 1 1;

        .bi-diagram-port {
          transition: background-color 0.25s ease-in-out;
          background-color: rgba(0, 0, 0, 0.08);
          width: 1.25rem;
          height: 1.25rem;
          margin-bottom: 0.25rem;

          &:hover {
            background-color: rgba(0, 0, 0, 0.1);
          }
        }
      }

      /* stylelint-disable-next-line no-descending-specificity */
      .bi-output-ports .bi-diagram-port {
        margin-left: auto;
      }
    }


    // ----------------------------
    // Default node
    // ----------------------------
    &.bi-diagram-node-default {
      transition: box-shadow 0.25s ease-in-out, border 0.3s ease-out;
      border: 0.07rem solid #8795a1;
      background-color: #dae1e7;
      color: #606f7b;
      border-radius: 0.25rem;
      box-shadow: 0 0.07rem 0.2rem 0 rgba(0, 0, 0, 0.1), 0 0.07rem 0.125rem 0 rgba(0, 0, 0, 0.06);
      padding: 0.5rem;

      &:hover {
        box-shadow: 0 0.125rem 1rem -0.2rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.3rem -125rem rgba(0, 0, 0, 0.05);
      }

      .bi-port-wrapper {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
      }
    }
  }

  // ----------------------------
  // Link canvas layer
  // ----------------------------
  .bi-link-canvas-layer {
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    // ----------------------------
    // Segment
    // ----------------------------
    .bi-diagram-segment {
      path {
        stroke: #dae1e7;
        stroke-width: 0.25rem;
        stroke-dasharray: 10, 2;
        fill: transparent;
        animation: BiDashSegmentAnimation 1s linear infinite;
      }

      circle {
        stroke: #dae1e7;
        stroke-width: 0.15rem;
        fill: #88cdff;
      }
    }


    // ----------------------------
    // Link item
    // ----------------------------
    .bi-diagram-link {
      pointer-events: stroke;

      // link path
      .bi-link-path {
        stroke: #dae1e7;
        stroke-width: 0.25rem;
        pointer-events: stroke;
        fill: transparent;
        cursor: pointer;
        user-select: none;
      }

      // link ghost
      .bi-link-ghost {
        pointer-events: stroke;
        stroke: transparent;
        stroke-width: 1.2rem;
        fill: transparent;
        cursor: pointer;
      }

      // hover
      &:hover .bi-link-path {
        stroke: #88cdff;
        stroke-dasharray: 10, 2;
        animation: BiDashSegmentAnimation 1s linear infinite;
      }

      // readonly link
      &.readonly-link {
        .bi-link-ghost {
          cursor: not-allowed;
        }

        .bi-link-path {
          cursor: not-allowed;
          stroke: #b8c2cc;
          stroke-dasharray: none;
        }

        &:hover {
          stroke: #b8c2cc;
          stroke-dasharray: none;
          animation: none;
        }
      }

      /* stylelint-disable-next-line */
      foreignObject {
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
      }

      // ----------------------------
      // Link label
      // ----------------------------
      .bi-diagram-link-label {
        display: inline-block;
        color: #fff;
        background-color: #3d4852;
        border-radius: 0.25rem;
        padding: 0.25rem;
        text-align: center;
        font-size: 0.875rem;
        user-select: none;
        min-width: 3rem;
        transform: translate(-50%, -50%);
      }
    }
  }
}


// ----------------------------
// Involved animations
// ----------------------------
@keyframes BiDashSegmentAnimation {
  from {
    stroke-dashoffset: 24;
  }

  to {
    stroke-dashoffset: 0;
  }
}
