@import '../../../topology-utils';

.odc-base-edge {
  --edge--stroke-width: 2px;
  --edge--stroke-dasharray: 0;
  --edge--stroke: #{$default-edge-stroke-color};
  --edge--fill: var(--edge--stroke);
  --edge--opacity: 1;
  --edge--cursor: pointer;
  --edge--active--stroke: #{$selected-stroke-color};
  --edge--active--fill: var(--edge--active--stroke);
  --edge--drag-active--opacity: #{$de-emphasize-opacity};
  --edge__arrow--cursor: default;
  --edge--interactive--stroke: #{$interactive-stroke-color};
  --edge--interactive--fill: var(--edge--interactive--stroke);

  cursor: var(--edge--cursor);
  stroke: var(--edge--stroke);
  fill: var(--edge--fill);
  opacity: var(--edge--opacity);

  &__link {
    stroke-width: var(--edge--stroke-width);
    stroke-dasharray: var(--edge--stroke-dasharray);
  }

  &.is-selected {
    fill: var(--edge--active--fill);
    stroke: var(--edge--active--stroke);
    .odc-base-edge__link,
    .pf-topology-connector-arrow {
      stroke: var(--edge--active--stroke);
    }
  }

  &.is-hover,
  &.is-dragging {
    fill: var(--edge--interactive--fill);
    stroke: var(--edge--interactive--stroke);
    .odc-base-edge__link,
    .pf-topology-connector-arrow {
      stroke: var(--edge--interactive--stroke);
    }
  }
  .pf-topology-connector-arrow {
    cursor: var(--edge__arrow--cursor);
    stroke: var(--edge--stroke);
  }
}

.odc-m-drag-active {
  .odc-base-edge {
    pointer-events: none;
    opacity: var(--edge--drag-active--opacity);
    &.is-dragging {
      opacity: var(--edge--opacity);
    }
    .pf-topology-connector-arrow {
      pointer-events: none;
    }
  }
}
.odc-m-filter-active {
  .odc-base-edge {
    opacity: var(--edge--drag-active--opacity);
    &.is-dragging {
      opacity: var(--edge--opacity);
    }
  }
}
