:root {
  --conn-color-normal: var(--c-border-muted);
  --conn-color-selected: var(--c-primary);

  --conn-handle-fill: transparent;

  --conn-selection-stroke: var(--c-selection-overlay);
  --conn-selection-stroke-width: 20px;

  --conn-path-stroke-width: 3px;

  --conn-text-selected: var(--c-primary);
  --conn-selection-selected: var(--c-contrast);
}

.f-connection {
  #normal_end {
    fill: var(--conn-color-normal);
  }

  #selected_end {
    fill: var(--conn-color-selected);
  }

  .f-connection-drag-handle {
    fill: var(--conn-handle-fill);
  }

  .f-connection-selection {
    stroke: var(--conn-selection-stroke);
    stroke-width: var(--conn-selection-stroke-width);
    fill: none;
  }

  .f-connection-path {
    stroke-width: var(--conn-path-stroke-width);
    fill: none;
    stroke: var(--conn-color-normal);
  }

  &.f-selected {
    .f-connection-path {
      stroke: var(--conn-color-selected);
    }

    .f-connection-text {
      fill: var(--conn-text-selected);
    }

    .f-connection-selection {
      stroke: var(--conn-selection-selected);
    }
  }
}
