@import "../../vars";

.connection:hover polyline {
  stroke-width: 3;
}

@keyframes dashdash {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -16;
  }
}

.connection polyline,
path.connection {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke: $neutral-600;
  // stroke-dasharray: 8;
  // animation: dashdash 1s linear infinite;

  cursor: pointer;

  &.hidden {
    stroke: transparent;

    &.parent-selected {
      stroke-dasharray: 8;
      stroke: #6c6c6c;
    }
  }
}

.connection[data-runtime="active"] {
  path {
    box-shadow: 5px 10px #888888;
    stroke: #4bac00;
  }
}

.connection.future-addition {
  stroke-dasharray: 6;

  path {
    stroke-width: 2;
    stroke: #007dc6a5;
  }
}

:not(.dark) {

  .connection.selected,
  .connection-view-path.selected path {
    stroke: $gray-800;
    stroke-width: 3;
  }

  .connection.pending-selection,
  .connection-view-path.pending-selection path {
    stroke: $gray-800;
  }
}

.dark {

  .connection.selected,
  .connection-view-path.selected path {
    stroke: $neutral-200;
    stroke-width: 3;
  }

  .connection.pending-selection,
  .connection-view-path.pending-selection path {
    stroke-dasharray: 6;
    stroke: $neutral-200;
  }
}

.connection.pending-selection,
.connection-view-path.pending-selection path {
  stroke-dasharray: 6;
}

.connection.future-removal {
  stroke-dasharray: 6;

  path {
    stroke-width: 2;
    stroke: #c60000a5;
  }
}

.connection.delayed polyline,
.connection-view-path.delayed path {
  stroke-dasharray: 6;
}

.connection polyline:hover {
  stroke: #3bb8ff;
}

.connection {
  position: absolute;
  /* width: 0;
		height: 0; */
}

.connections-view {
  position: absolute;
  width: 100%;
  height: 100%;

  .connection.delayed polyline {
    stroke-dasharray: 6;
  }

  path {
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke: $neutral-400;

    &.future-add {
      stroke: #007dc6a5;
    }

    &.future-remove {
      stroke: #c60000a5;
    }
  }

  text.label {
    // transform: translateX(-50%);
    // transform-origin: center;
    // transform: translate(50%);
    // position: relative;
    font-size: 14px;
    text-anchor: middle;
  }
}