:root {
  --pf-topology-visualization-surface--BackgroundColor: transparent;

  /* Create connector */
  /* Remove --pf-topology-create-connector-color at a breaking change */
  --pf-topology-create-connector-color: var(--pf-t--global--border--color--on-secondary);
  --pf-topology__create-connector-color--Stroke: var(--pf-topology-create-connector-color, var(--pf-t--global--border--color--on-secondary));
  --pf-topology__create-connector-color--Fill: var(--pf-topology-create-connector-color, var(--pf-t--global--border--color--on-secondary));

  /* node */
  --pf-topology__node--Color: var(--pf-t--global--icon--color--regular);
  --pf-topology__node__background--Fill: var(--pf-t--global--background--color--floating--default);
  --pf-topology__node__background--Stroke: var(--pf-t--global--border--color--default);
  --pf-topology__node__background--StrokeWidth: var(--pf-t--global--border--width--regular);
  --pf-topology__node--m-dragging--background--StrokeWidth: var(--pf-t--global--border--width--regular);

  /* Status changes */
  --pf-topology__node--m-disabled--Background--Fill: var(--pf-t--global--background--color--disabled--default);
  --pf-topology__node--m-disabled--Background--Stroke: var(--pf-t--global--border--color--disabled);

  --pf-topology__node--m-info--Background--Fill: var(--pf-t--global--color--nonstatus--blue--default);
  --pf-topology__node--m-info--Background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default);

  --pf-topology__node--m-success--Background--Fill: var(--pf-t--global--color--status--success--default);
  --pf-topology__node--m-success--Background--Stroke: var(--pf-t--global--border--color--status--success--default);

  --pf-topology__node--m-warning--Background--Fill: var(--pf-t--global--color--status--warning--default);
  --pf-topology__node--m-warning--Background--Stroke: var(--pf-t--global--border--color--status--warning--default);

  --pf-topology__node--m-danger--Background--Fill: var(--pf-t--global--color--status--danger--default);
  --pf-topology__node--m-danger--Background--Stroke: var(--pf-t--global--border--color--status--danger--default);

  --pf-topology__node--m-selected--Background--Fill: var(--pf-t--global--border--color--brand--default);
  --pf-topology__node--m-selected--Background--Stroke: var(--pf-t--global--border--color--brand--default);


  /* Hover changes */
  --pf-topology__node--m-hover--background--Stroke: var(--pf-t--global--border--color--default);
  --pf-topology__node--m--hover--m-info--node__background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--hover);
  --pf-topology__node--m--hover--m-success--node__background--Stroke: var(--pf-t--global--border--color--status--success--hover);
  --pf-topology__node--m--hover--m-warning--node__background--Stroke: var(--pf-t--global--border--color--status--warning--hover);
  --pf-topology__node--m--hover--m-danger--node__background--Stroke: var(--pf-t--global--border--color--status--danger--hover);

  /* Selection changes */
  --pf-topology__node--m-selected__background--StrokeWidth: var(--pf-t--global--border--width--strong);

  /* node decorators */
  --pf-topology__node_decorator--Color: var(--pf-t--global--icon--color--regular);
  --pf-topology__node__decorator__bg--Fill: var(--pf-t--global--background--color--floating--default);
  --pf-topology__node__decorator__bg--Stroke: var(--pf-t--global--border--color--default);
  --pf-topology__node__decorator__bg--StrokeWidth: var(--pf-t--global--border--width--regular);

  --pf-topology__node__decorator__status--m-info--Color: var(--pf-t--global--icon--color--brand--default);
  --pf-topology__node__decorator__status--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
  --pf-topology__node__decorator__status--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
  --pf-topology__node__decorator__status--m-success--Color: var(--pf-t--global--icon--color--status--success--default);

  /* node labels */
  --pf-topology__node__label__text--Fill: var(--pf-t--global--text--color--regular);
  --pf-topology__node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--subtle);

  --pf-topology__node--m-hover--node__label__text--Fill: var(--pf-t--global--text--color--on-brand--default);
  --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-t--global--text--color--on-brand--default);
  --pf-topology__node--m-selected--m-info--node__label__text--Fill: var(--pf-t--global--text--color--nonstatus--on-blue--default);
  --pf-topology__node--m-selected--m-danger--node__label__text--Fill: var(--pf-t--global--text--color--status--on-danger--default);
  --pf-topology__node--m-selected--m-warning--node__label__text--Fill: var(--pf-t--global--text--color--regular);
  --pf-topology__node--m-selected--m-success--node__label__text--Fill: var(--pf-t--global--text--color--status--on-success--default);

  --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--on-brand--default);
  --pf-topology__node--m-selected--m-info--node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--nonstatus--on-blue--default);
  --pf-topology__node--m-selected--m-warning--node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--status--on-warning--default);
  --pf-topology__node--m-selected--m-success--node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--status--on-success--default);
  --pf-topology__node--m-selected--m-danger--node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--status--on-danger--default);

  --pf-topology__node__label__background--Fill: var(--pf-t--global--background--color--floating--default);
  --pf-topology__node__label__background--Stroke: var(--pf-t--global--border--color--default);

  --pf-topology__node--m-hover--label__background--Stroke: var(--pf-t--global--border--color--default);

  --pf-topology__node--m-selected--node__label__background--Stroke: var(--pf-t--global--border--color--brand--default);
  --pf-topology__node--m-info--node__label__background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default);
  --pf-topology__node--m-success--node__label__background--Stroke: var(--pf-t--global--border--color--status--success--default);
  --pf-topology__node--m-warning--node__label__background--Stroke: var(--pf-t--global--border--color--status--warning--default);
  --pf-topology__node--m-danger--node__label__background--Stroke: var(--pf-t--global--border--color--status--danger--default);
  --pf-topology__node__label__background--StrokeWidth: var(--pf-t--global--border--width--regular);
  --pf-topology__node__label--m-dragging--background--StrokeWidth: var(--pf-t--global--border--width--regular);

  --pf-topology__node--m--hover--m-info--node__label__background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--hover);
  --pf-topology__node--m--hover--m-success--node__label__background--Stroke: var(--pf-t--global--border--color--status--success--hover);
  --pf-topology__node--m--hover--m-warning--node__label__background--Stroke: var(--pf-t--global--border--color--status--warning--hover);
  --pf-topology__node--m--hover--m-danger--node__label__background--Stroke: var(--pf-t--global--border--color--status--danger--hover);

  --pf-topology__node--m-selected--node__label__background--Fill: var(--pf-t--global--color--brand--default);
  --pf-topology__node--m-selected--m-info--node__label__background--Fill: var(--pf-t--global--color--nonstatus--blue--default);
  --pf-topology__node--m-selected--m-danger--node__label__background--Fill: var(--pf-t--global--color--status--danger--default);
  --pf-topology__node--m-selected--m-warning--node__label__background--Fill: var(--pf-t--global--color--status--warning--default);
  --pf-topology__node--m-selected--m-success--node__label__background--Fill: var(--pf-t--global--color--status--success--default);

  /* node label icon */
  --pf-topology__node__label__icon--Color: var(--pf-t--global--icon--color--regular);

  --pf-topology__node__label__icon__background--Fill: var(--pf-t--global--background--color--floating--default);
  --pf-topology__node__label__icon__background--StrokeWidth: var(--pf-t--global--border--width--regular);
  --pf-topology__node__label__icon__background--Stroke: var(--pf-t--global--border--color--default);

  --pf-topology__node--m-selected--label__icon__background--Stroke: var(--pf-t--global--border--color--brand--default);
  --pf-topology__node--m-selected--label__icon__background--StrokeWidth: var(--pf-t--global--border--width--strong);
  --pf-topology__node--m-info--label__icon__background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default);
  --pf-topology__node--m-success--label__icon__background--Stroke: var(--pf-t--global--border--color--status--success--default);
  --pf-topology__node--m-warning--label__icon__background--Stroke: var(--pf-t--global--border--color--status--warning--default);
  --pf-topology__node--m-danger--label__icon__background--Stroke: var(--pf-t--global--border--color--status--danger--default);

  --pf-topology__node__label__badge__rect--StrokeWidth: var(--pf-t--global--border--width--regular);

  --pf-topology__node__separator--Stroke: var(--pf-t--global--border--color--default);
  --pf-topology__node__separator--StrokeWidth: var(--pf-t--global--border--width--regular);
  --pf-topology__node--m-selected--separator--Stroke: var(--pf-t--global--border--color--default);

  --pf-topology__node__action-icon__icon--Color: var(--pf-t--global--icon--color--regular);
  --pf-topology__node--m-selected--action-icon__icon--Color: var(--pf-t--global--icon--color--on-brand--default);

  /* group */
  --pf-topology__group--m-selected--topology__node__action-icon__icon--Color: var(--pf-t--global--icon--color--inverse);

  --pf-topology__group--m-selected--topology__group__background--Fill: var(--pf-t--global--background--color--secondary--default);

  --pf-topology__group__background--Fill: var(--pf-t--global--background--color--secondary--default);
  --pf-topology__group__background--Stroke: var(--pf-t--global--border--color--default);
  --pf-topology__group__background--StrokeWidth: 5px;

  --pf-topology__group--m-alt-group--topology__group__background--Fill: var(--pf-t--global--background--color--primary--default);
  --pf-topology__group--m-alt-group--topology__group__background--Stroke: var(--pf-t--global--border--color--default);

  --pf-topology__group--m-selected--topology__group__background--Stroke: var(--pf-t--global--border--color--clicked);
  --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-t--global--border--color--hover);
  --pf-topology__group--m-selected--m-hover--topology__group__background--Stroke: var(--pf-t--global--border--color--hover);
  --pf-topology__group--m-drop-target--topology__group__background--Fill: var(--pf-t--global--color--nonstatus--blue--default);
  --pf-topology__group--m-drop-target--topology__group__background--Stroke: var(--pf-t--global--border--color--brand--default);
  --pf-topology__group__collapsed-badge__node__label__badge__rect--Fill: var(--pf-t--global--background--color--floating--default);
  --pf-topology__group__collapsed-badge__node__label__badge__rect--Stroke: var(--pf-t--global--border--color--default);
  --pf-topology__group__collapsed-badge__node__label__badge__text--Fill: var(--pf-t--global--text--color--regular);

  --pf-topology__group__label__node__label__background--Fill: var(--pf-t--global--background--color--inverse--default);
  --pf-topology__group__label__node__label__background--StrokeWidth: var(--pf-t--global--border--width--regular);
  --pf-topology__group__label__text--Fill: var(--pf-t--global--text--color--inverse);
  --pf-topology__group__label__node__action-icon__icon--Color: var(--pf-t--global--icon--color--inverse);
  --pf-topology__group--m-selected--group__label__node__label__background--Fill: var(--pf-t--global--color--brand--default);

  /* edge */
  --pf-topology__edge--Stroke: #707070;
  --pf-topology__edge--StrokeWidth: var(--pf-t--global--border--width--regular);
  --pf-topology__edge--HoverStroke: var(--pf-topology__edge--Stroke);
  --pf-topology__edge--ActiveStroke: var(--pf-t--global--border--color--clicked);
  --pf-topology__edge--ActiveStrokeWidth: var(--pf-t--global--border--width--strong);
  --pf-topology__edge--InteractiveStroke: var(--pf-t--global--border--color--brand--default);
  --pf-topology__edge--m-selected--background--Stroke: var(--pf-topology__edge--ActiveStroke);
  --pf-topology__edge--m-selected--background--Opacity: 0.3;
  --pf-topology__edge--m-drop-target--Stroke: var(--pf-t--global--border--color--brand--default);
  --pf-topology__edge--m-drop-target--StrokeWidth: var(--pf-t--global--border--width--strong);

  --pf-topology__edge--m-info--EdgeStroke: var(--pf-t--global--border--color--brand--default);
  --pf-topology__edge--m-success--EdgeStroke: var(--pf-t--global--border--color--status--success--default);
  --pf-topology__edge--m-warning--EdgeStroke: var(--pf-t--global--border--color--status--warning--default);
  --pf-topology__edge--m-danger--EdgeStroke: var(--pf-t--global--border--color--status--danger--default);

  --pf-topology__edge--m-info--EdgeFill: var(--pf-t--global--border--color--brand--default);
  --pf-topology__edge--m-success--EdgeFill: var(--pf-t--global--border--color--status--success--default);
  --pf-topology__edge--m-warning--EdgeFill: var(--pf-t--global--border--color--status--warning--default);
  --pf-topology__edge--m-danger--EdgeFill: var(--pf-t--global--border--color--status--danger--default);

  --pf-topology__edge--m-hover--background--Stroke: var(--pf-t--global--border--color--default);

  --pf-topology__edge__tag__text--Fill: var(--pf-t--global--text--color--inverse);
  --pf-topology__edge__tag__text--Stroke: var(--pf-t--global--text--color--inverse);

  --pf-topology__edge__tag__background--Fill: var(--pf-t--global--background--color--inverse--default);
  --pf-topology__edge__tag--m-info--background--Fill: var(--pf-t--global--color--nonstatus--blue--default);

  --pf-topology__edge__tag--m-info--text--Fill: var(--pf-t--global--text--color--nonstatus--on-blue--default);
  --pf-topology__edge__tag--m-info--text--Stroke: var(--pf-t--global--text--color--nonstatus--on-blue--default);

  --pf-topology__edge__tag--m-success--background--Fill: var(--pf-t--global--color--status--success--default);

  --pf-topology__edge__tag--m-success--text--Fill: var(--pf-t--global--text--color--status--on-success--default);
  --pf-topology__edge__tag--m-success--text--Stroke: var(--pf-t--global--text--color--status--on-success--default);

  --pf-topology__edge__tag--m-warning--background--Fill: var(--pf-t--global--color--status--warning--default);

  --pf-topology__edge__tag--m-warning--text--Fill: var(--pf-t--global--text--color--status--on-warning--default);
  --pf-topology__edge__tag--m-warning--text--Stroke: var(--pf-t--global--text--color--status--on-warning--default);

  --pf-topology__edge__tag--m-danger--background--Fill: var(--pf-t--global--color--status--danger--default);

  --pf-topology__edge__tag--m-danger--text--Fill: var(--pf-t--global--text--color--status--on-danger--default);
  --pf-topology__edge__tag--m-danger--text--Stroke: var(--pf-t--global--text--color--status--on-danger--default);

  /* connectors */
  --pf-topology-connector-arrow--m-alt-connector-arrow--Fill: var(--pf-t--global--icon--color--regular);

  --pf-topology__connector-square--m-source--Fill: var(--pf-t--global--background--color--secondary--default);

  --pf-topology-default-create-connector__arrow--Fill: var(--pf-t--global--background--color--secondary--default);

  --pf-topology-default-create-connector--m-hover--line--Stroke: var(--pf-t--global--border--color--default);
  --pf-topology-default-create-connector--m-hover--arrow--Fill: var(--pf-t--global--border--color--default);
  --pf-topology-default-create-connector--m-hover--arrow--Stroke: var(--pf-t--global--border--color--default);

  --pf-topology__area-select-rect--Fill: var(--pf-t--global--border--color--clicked);
  --pf-topology__area-select-rect--Stroke: var(--pf-t--global--color--brand--clicked);
  --pf-topology__area-select-rect--StrokeWidth: var(--pf-t--global--border--width--regular);
  --pf-topology__area-select-rect--Opacity: 0.3;
}

.pf-topology-visualization-surface {
  background-color: var(--pf-topology-visualization-surface--BackgroundColor);
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
  position: relative;
}

.pf-topology-visualization-surface__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pf-topology-visualization-surface__svg g:focus {
  outline: none;
}

.pf-topology-context-menu__c-dropdown__menu {
  position: initial !important;
}

.pf-topology-context-sub-menu {
  position: relative;
  padding-right: var(--pf-t--global--spacer--lg) !important;
}

.pf-topology-context-sub-menu__container .pf-v6-c-menu__list-item {
    min-width: auto;
}

.pf-topology-context-sub-menu__arrow {
  position: absolute;
  right: var(--pf-t--global--spacer--xs);
  top: 50%;
  transform: translateY(-50%);
}

/* Node */
.pf-topology__node {
  outline: none;
  color: var(--pf-topology__node--Color);
}

/* Color is defined in the svg but fill will override it */
.pf-topology__node svg,
.pf-topology__group svg {
  fill: var(--pf-topology__node--Color);
}

.pf-topology__node__background {
  fill: var(--pf-topology__node__background--Fill);
  stroke-width: var(--pf-topology__node__background--StrokeWidth);
  stroke: var(--pf-topology__node__background--Stroke);
}

.pf-topology__node__background.pf-m-hover {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-info--node__background--Stroke);
}

.pf-topology__node__background.pf-m-disabled {
  --pf-topology__node__background--Fill: var(--pf-topology__node--m-disabled--Background--Fill);
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m-disabled--Background--Stroke);
}

.pf-topology__node__background.pf-m-info {
  --pf-topology__node__background--Fill: var(--pf-topology__node--m-info--Background--Fill);
}

.pf-topology__node__background.pf-m-hover.pf-m-info {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-info--node__background--Stroke);
}

.pf-topology__node__background.pf-m-success {
  --pf-topology__node__background--Fill: var(--pf-topology__node--m-success--Background--Fill);
}

.pf-topology__node__background.pf-m-success.pf-m-hover {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-success--node__background--Stroke);
}

.pf-topology__node__background.pf-m-warning {
  --pf-topology__node__background--Fill: var(--pf-topology__node--m-warning--Background--Fill);
}

.pf-topology__node__background.pf-m-danger {
  --pf-topology__node__background--Fill: var(--pf-topology__node--m-danger--Background--Fill);
}

.pf-topology__node__background.pf-m-selected {
  --pf-topology__node__background--Fill: var(--pf-topology__node--m-selected--Background--Fill);
}

.pf-topology__node.pf-m-dragging {
  --pf-topology__node__background--StrokeWidth: var(--pf-topology__node--m-dragging--background--StrokeWidth);
  --pf-topology__node__label__background--StrokeWidth: var(--pf-topology__node__label--m-dragging--background--StrokeWidth);
}

.pf-topology__node.pf-m-dragging .pf-topology__node__background {
  cursor: grab;
}

.pf-topology__node.pf-m-selected .pf-topology__node__background {
  stroke-width: var(--pf-topology__node--m-selected__background--StrokeWidth);
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m-selected--Background--Stroke);
}

.pf-topology__node.pf-m-info .pf-topology__node__background {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m-info--Background--Stroke);
}

.pf-topology__node.pf-m-hover .pf-topology__node__background {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m-hover--background--Stroke);
}

.pf-topology__node.pf-m-hover.pf-m-selected .pf-topology__node__background {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m-selected--Background--Stroke);
}

.pf-topology__node.pf-m-hover.pf-m-info .pf-topology__node__background {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m-info--Background--Stroke);
}

.pf-topology__node.pf-m-success .pf-topology__node__background {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m-success--Background--Stroke);
}

.pf-topology__node.pf-m-hover.pf-m-success .pf-topology__node__background {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-success--node__label__background--Stroke);
}

.pf-topology__node.pf-m-warning .pf-topology__node__background {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m-warning--Background--Stroke);
}

.pf-topology__node.pf-m-hover.pf-m-warning .pf-topology__node__background {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-warning--node__label__background--Stroke);
}

.pf-topology__node.pf-m-danger .pf-topology__node__background {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m-danger--Background--Stroke);
}

.pf-topology__node.pf-m-hover.pf-m-danger .pf-topology__node__background {
  --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-danger--node__label__background--Stroke);
}

/* Node decorator */
.pf-topology__node__decorator {
  --pf-topology__node--Color: var(--pf-topology__node_decorator--Color);
  transition: color 0.2s ease;
  outline: none;
}

.pf-topology__node__decorator svg {
  fill: var(--pf-topology__node_decorator--Color);
}

.pf-topology__node__decorator__bg {
  fill: var(--pf-topology__node__decorator__bg--Fill);
  stroke: var(--pf-topology__node__decorator__bg--Stroke);
  stroke-width: var(--pf-topology__node__decorator__bg--StrokeWidth);
}

.pf-topology__node__decorator__icon {
  font-size: var(--pf-t--global--icon--size--font--body--sm);
  color: var(--pf-topology__node_decorator--Color);
}

.pf-topology__node__decorator__status {
  color: var(--pf-topology__node_decorator--Color);
}

.pf-topology__node__decorator__status .pf-m-info {
  --pf-topology__node_decorator--Color: var(--pf-topology__node__decorator__status--m-info--Color);
}
.pf-topology__node__decorator__status .pf-m-danger {
  --pf-topology__node_decorator--Color: var(--pf-topology__node__decorator__status--m-danger--Color);
}
.pf-topology__node__decorator__status .pf-m-warning {
  --pf-topology__node_decorator--Color: var(--pf-topology__node__decorator__status--m-warning--Color);
}
.pf-topology__node__decorator__status .pf-m-success {
  --pf-topology__node_decorator--Color: var(--pf-topology__node__decorator__status--m-success--Color);
}

/* Node label */
.pf-topology__node.pf-m-selected {
  --pf-topology__node__label__text--Fill: var(--pf-topology__node--m-selected--node__label__text--Fill);
  --pf-topology__node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--node__label__text--m-secondary--Fill);
}

.pf-topology__node__label > text {
  fill: var(--pf-topology__node__label__text--Fill);
  font-size: var(--pf-t--global--font--size--body--sm);
  pointer-events: none;
}

.pf-topology__node__label > text.pf-m-secondary {
  fill: var(--pf-topology__node__label__text--m-secondary--Fill);
  font-size: var(--pf-t--global--font--size--body--sm);
}

.pf-topology__node__label__background {
  fill: var(--pf-topology__node__label__background--Fill);
  stroke-width: var(--pf-topology__node__label__background--StrokeWidth);
  stroke: var(--pf-topology__node__label__background--Stroke);
}

.pf-topology__node.pf-m-selected  {
  --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-selected--node__label__background--Stroke);
  --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--node__label__background--Fill);
  --pf-topology__node__separator--Stroke: var(--pf-topology__node--m-selected--node__label__text--m-secondary--Fill);
  --pf-topology__node__action-icon__icon--Color: var(--pf-topology__node--m-selected--action-icon__icon--Color);
}

.pf-topology__node.pf-m-info {
  --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-info--node__label__background--Stroke);
}

.pf-topology__node.pf-m-hover.pf-m-info {
  --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m--hover--m-info--node__label__background--Stroke);
}

.pf-topology__node.pf-m-success {
  --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-success--node__label__background--Stroke);
}
.pf-topology__node.pf-m-hover.pf-m-success {
  --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m--hover--m-success--node__label__background--Stroke);
}

.pf-topology__node.pf-m-warning {
  --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-warning--node__label__background--Stroke);
}

.pf-topology__node.pf-m-hover.pf-m-warning {
  --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m--hover--m-warning--node__label__background--Stroke);
}

.pf-topology__node.pf-m-danger {
  --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-danger--node__label__background--Stroke);
}

.pf-topology__node.pf-m-hover.pf-m-danger {
  --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m--hover--m-danger--node__label__background--Stroke);
}


.pf-topology__node.pf-m-selected.pf-m-info {
  --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--m-info--node__label__background--Fill);
  --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-topology__node--m-selected--m-info--node__label__text--Fill);
  --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--m-info--node__label__text--m-secondary--Fill);
}

.pf-topology__node.pf-m-selected.pf-m-danger  {
  --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--m-danger--node__label__background--Fill);
  --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-topology__node--m-selected--m-danger--node__label__text--Fill);
  --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--m-danger--node__label__text--m-secondary--Fill);
}

.pf-topology__node.pf-m-selected.pf-m-warning {
  --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--m-warning--node__label__background--Fill);
  --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-topology__node--m-selected--m-warning--node__label__text--Fill);
  --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--m-warning--node__label__text--m-secondary--Fill);
}

.pf-topology__node.pf-m-selected.pf-m-success {
  --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--m-success--node__label__background--Fill);
  --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-topology__node--m-selected--m-success--node__label__text--Fill);
  --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--m-success--node__label__text--m-secondary--Fill);
}

/* Node label badge */
.pf-topology__node__label__badge > rect {
  /* TODO Color is hard coded in the badge. */
  stroke-width: var(--pf-topology__node__label__badge__rect--StrokeWidth);
}

.pf-topology__node__label__badge > text {
  font-size: var(--pf-t--global--font--size--body--sm);
  pointer-events: none;
}

.pf-topology__node__label__icon {
  color: var(--pf-topology__node__label__icon--Color);
}

.pf-topology__node__label__icon > svg {
  height: 100%;
  width: 100%;
  fill: currentColor;
}

.pf-topology__node__label__icon__background {
  fill: var(--pf-topology__node__label__icon__background--Fill);
  stroke-width: var(--pf-topology__node__label__icon__background--StrokeWidth);
  stroke: var(--pf-topology__node__label__icon__background--Stroke);
}

.pf-topology__node.pf-m-selected .pf-topology__node__label__icon__background {
  stroke-width: var(--pf-topology__node--m-selected--label__icon__background--StrokeWidth);
  stroke: var(--pf-topology__node--m-selected--label__icon__background--Stroke);
}

.pf-topology__node.pf-m-info .pf-topology__node__label__icon__background {
  stroke: var(--pf-topology__node--m-info--label__icon__background--Stroke);
}

.pf-topology__node.pf-m-success .pf-topology__node__label__icon__background {
  stroke: var(--pf-topology__node--m-success--label__icon__background--Stroke);
}

.pf-topology__node.pf-m-warning .pf-topology__node__label__icon__background {
  stroke: var(--pf-topology__node--m-warning--label__icon__background--Stroke);
}

.pf-topology__node.pf-m-danger .pf-topology__node__label__icon__background {
  stroke: var(--pf-topology__node--m-danger--label__icon__background--Stroke);
}

.pf-topology__node__separator {
  stroke: var(--pf-topology__node__separator--Stroke);
  stroke-width: var(--pf-topology__node__separator--StrokeWidth);
}

.pf-topology__node__action-icon {
  cursor: pointer;
}

.pf-topology__node__action-icon__background {
  stroke-width: 0;
  fill: transparent;
}

.pf-topology__node__action-icon__icon {
  color: var(--pf-topology__node__action-icon__icon--Color);
}

.pf-topology__node__action-icon__icon svg {
  fill: currentColor;
}

.pf-topology__group.pf-m-selected .pf-topology__node__action-icon__icon {
  color: var(--pf-topology__group--m-selected--topology__node__action-icon__icon--Color);
}

.pf-topology__group {
  outline: none;
}

/* Group background */
.pf-topology__group__background {
  fill: var(--pf-topology__group__background--Fill);
  stroke: var(--pf-topology__group__background--Stroke);
  stroke-width: var(--pf-topology__group__background--StrokeWidth);
}

.pf-topology__group.pf-m-alt-group .pf-topology__group__background {
  --pf-topology__group__background--Fill: var(--pf-topology__group--m-alt-group--topology__group__background--Fill);
  --pf-topology__group__background--Stroke: var(--pf-topology__group--m-alt-group--topology__group__background--Stroke);
}

.pf-topology__group.pf-m-selected .pf-topology__group__background {
  --pf-topology__group__background--Fill: var(--pf-topology__group--m-selected--topology__group__background--Fill);
  --pf-topology__group__background--Stroke: var(--pf-topology__group--m-selected--topology__group__background--Stroke);
}

.pf-topology__group.pf-m-hover .pf-topology__group__background {
  --pf-topology__group__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke);
  --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke);
}

.pf-topology__group.pf-m-hover.pf-m-selected .pf-topology__group__background {
  --pf-topology__group__background--Fill: var(--pf-topology__group--m-selected--topology__group__background--Fill);
  --pf-topology__group__background--Stroke: var(--pf-topology__group--m-selected--m-hover--topology__group__background--Stroke);
  --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-selected--m-hover--topology__group__background--Stroke);
}

.pf-topology__group.pf-m-drop-target .pf-topology__group__background {
  --pf-topology__group__background--Stroke: var(--pf-topology__group--m-drop-target--topology__group__background--Stroke);
  stroke-dasharray: 12;
}

/* Collapsed group badge */
.pf-topology__group__collapsed-badge.pf-topology__node__label__badge > rect {
  fill: var(--pf-topology__group__collapsed-badge__node__label__badge__rect--Fill);
  stroke: var(--pf-topology__group__collapsed-badge__node__label__badge__rect--Stroke);
}

.pf-topology__group__collapsed-badge.pf-topology__node__label__badge > text {
  font-size: var(--pf-t--global--font--size--body--sm);
  pointer-events: none;
  fill: var(--pf-topology__group__collapsed-badge__node__label__badge__text--Fill);
}

/*  Group label */
.pf-topology__group__label .pf-topology__node__label__background {
  fill: var(--pf-topology__group__label__node__label__background--Fill);
  --pf-topology__node__label__background--Stroke: var(--pf-topology__group__label__node__label__background--Stroke);
  --pf-topology__node__label__background--StrokeWidth: var(--pf-topology__group__label__node__label__background--StrokeWidth);
}

.pf-topology__group__label > text {
  fill: var(--pf-topology__group__label__text--Fill);
  font-size: var(--pf-t--global--font--size--body--sm);
  pointer-events: none;
}

.pf-topology__group__label .pf-topology__node__action-icon__icon {
  color: var(--pf-topology__group__label__node__action-icon__icon--Color);
}

.pf-topology__group.pf-m-selected .pf-topology__group__label .pf-topology__node__label__background {
  fill: var(--pf-topology__group--m-selected--group__label__node__label__background--Fill);
  --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke);
}

/* Edge */
.pf-topology__edge {
  --edge--stroke-width: var(--pf-topology__edge--StrokeWidth);
  --edge--stroke-dasharray: 0;
  --edge--stroke: var(--pf-topology__edge--Stroke);
  --edge--fill: var(--edge--stroke);
  --edge--opacity: 1;
  --edge--cursor: pointer;
  --edge--hover--stroke: var(--pf-topology__edge--HoverStroke);
  --edge--hover--fill: var(--edge--hover--stroke);
  --edge--active--stroke: var(--pf-topology__edge--ActiveStroke);
  --edge--active--stroke-width: var(--pf-topology__edge--ActiveStrokeWidth);
  --edge--active--fill: var(--edge--active--stroke);
  --edge--drag-active--opacity: 0.4;
  --edge__arrow--cursor: default;
  --edge--interactive--stroke: var(--pf-topology__edge--InteractiveStroke);
  --edge--interactive--fill: var(--edge--interactive--stroke);

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

.pf-topology__edge.pf-m-info {
  --edge--stroke: var(--pf-topology__edge--m-info--EdgeStroke);
  --edge--fill: var(--pf-topology__edge--m-info--EdgeFill);
}

.pf-topology__edge.pf-m-success {
  --edge--stroke: var(--pf-topology__edge--m-success--EdgeStroke);
  --edge--fill: var(--pf-topology__edge--m-success--EdgeFill);
}
.pf-topology__edge.pf-m-warning {
  --edge--stroke: var(--pf-topology__edge--m-warning--EdgeStroke);
  --edge--fill: var(--pf-topology__edge--m-warning--EdgeFill);
}

.pf-topology__edge.pf-m-danger {
  --edge--stroke: var(--pf-topology__edge--m-danger--EdgeStroke);
  --edge--file: var(--pf-topology__edge--m-danger--EdgeFill);
}

.pf-topology__edge__background {
  stroke-width: 10px;
  stroke: transparent;
  fill: none;
}
.pf-topology__edge.pf-m-selected .pf-topology__edge__background {
  stroke: var(--pf-topology__edge--m-selected--background--Stroke);
  opacity: var(--pf-topology__edge--m-selected--background--Opacity);
}
.pf-topology__edge.pf-m-hover .pf-topology__edge__background {
  stroke: var(--pf-topology__edge--m-hover--background--Stroke);
}

.pf-topology__edge__link {
  stroke-width: var(--edge--stroke-width);
  stroke-dasharray: var(--edge--stroke-dasharray);
  fill-opacity: 0;
  animation: pf-topology__edge__dash 0s linear infinite forwards;
}

.pf-topology__edge__link.pf-m-dotted {
  stroke-dasharray: 2;
  stroke-dashoffset: 2;
}
.pf-topology__edge__link.pf-m-dashed {
  stroke-dasharray: 4 2;
  stroke-dashoffset: 6;
}
.pf-topology__edge__link.pf-m-dashed-md {
  stroke-dasharray: 8 2;
  stroke-dashoffset: 10;
}
.pf-topology__edge__link.pf-m-dashed-lg {
  stroke-dasharray: 16 2;
  stroke-dashoffset: 18;
}
.pf-topology__edge__link.pf-m-dashed-xl {
  stroke-dasharray: 32 2;
  stroke-dashoffset: 34;
}

.pf-topology__edge__link.pf-m-drop-target {
  stroke-dasharray: 2;
  stroke-dashoffset: 2;
  stroke: var(--pf-t--global--border--color--hover);
  stroke-width: var(--pf-t--global--border--width--strong);

}

@keyframes pf-topology__edge__dash {
  to {
    stroke-dashoffset: 0;
  }
}

.pf-topology__edge.pf-m-selected .pf-topology__edge__link,
.pf-topology__edge.pf-m-selected .pf-topology-connector-arrow {
  fill: var(--edge--active--fill);
  stroke: var(--edge--active--stroke);
  stroke-width: var(--edge--active--stroke-width);
}

.pf-topology__edge.pf-m-selected.pf-m-hover .pf-topology__edge__link,
.pf-topology__edge.pf-m-selected.pf-m-hover .pf-topology-connector-arrow {
  fill: var(--edge--active--fill);
  stroke: var(--edge--active--stroke);
}

.pf-topology__edge.pf-m-dragging {
  pointer-events: none;
}
.pf-topology__edge.pf-m-hover .pf-topology__edge__link,
.pf-topology__edge.pf-m-hover .pf-topology-connector-arrow {
  fill: var(--edge--hover--fill);
  stroke: var(--edge--hover--stroke);
}

.pf-topology__edge.pf-m-dragging .pf-topology__edge__link,
.pf-topology__edge.pf-m-dragging .pf-topology-connector-arrow {
  fill: var(--edge--interactive--fill);
  stroke: var(--edge--interactive--stroke);
}

.pf-topology__edge .pf-topology-connector-arrow {
  cursor: var(--edge__arrow--cursor);
  stroke: var(--edge--stroke);
}

.pf-topology__edge .pf-topology-connector-arrow.pf-m-draggable {
  cursor: pointer;
}

.pf-topology__edge__tag__background {
  fill: var(--pf-topology__edge__tag__background--Fill);
  stroke-width: 0;
}

.pf-topology__edge__tag > text {
  fill: var(--pf-topology__edge__tag__text--Fill);
  stroke: var(--pf-topology__edge__tag__text--Stroke);
  stroke-width: 0.5;
  font-size: 10px;
  pointer-events: none;
}

.pf-topology__edge__tag.pf-m-info .pf-topology__edge__tag__background {
  fill: var(--pf-topology__edge__tag--m-info--background--Fill);
}

.pf-topology__edge__tag.pf-m-info > text {
  fill: var(--pf-topology__edge__tag--m-info--text--Fill);
  stroke: var(--pf-topology__edge__tag--m-info--text--Stroke);
}


.pf-topology__edge__tag.pf-m-success .pf-topology__edge__tag__background {
  fill: var(--pf-topology__edge__tag--m-success--background--Fill);
}

.pf-topology__edge__tag.pf-m-success > text {
  fill: var(--pf-topology__edge__tag--m-success--text--Fill);
  stroke: var(--pf-topology__edge__tag--m-success--text--Stroke);
}

.pf-topology__edge__tag.pf-m-warning .pf-topology__edge__tag__background {
  fill: var(--pf-topology__edge__tag--m-warning--background--Fill);
}

.pf-topology__edge__tag.pf-m-warning > text {
  fill: var(--pf-topology__edge__tag--m-warning--text--Fill);
  stroke: var(--pf-topology__edge__tag--m-warning--text--Stroke);
}

.pf-topology__edge__tag.pf-m-danger .pf-topology__edge__tag__background {
  fill: var(--pf-topology__edge__tag--m-danger--background--Fill);
}

.pf-topology__edge__tag.pf-m-danger > text {
  fill: var(--pf-topology__edge__tag--m-danger--text--Fill);
  stroke: var(--pf-topology__edge__tag--m-danger--text--Stroke);
}


/* Connectors */
.pf-topology-connector-arrow {
  stroke-width: 1;
  stroke: var(--edge--stroke);
}

.pf-topology-connector-arrow.pf-m-alt-connector-arrow {
  fill: var(--pf-topology-connector-arrow--m-alt-connector-arrow--Fill);
}

.pf-topology__connector-cross {
  stroke-width: 1;
  stroke: var(--edge--stroke);
}
.pf-topology__connector-cross.pf-m-source {
  fill: var(--edge--stroke);
}

.pf-topology__connector-square, .pf-topology__connector-circle {
  stroke-width: 1;
  stroke: var(--edge--stroke);
  fill: var(--edge--stroke);
}

.pf-topology__connector-square.pf-m-source, .pf-topology__connector-circle.pf-m-source {
  fill: var(--pf-topology__connector-square--m-source--Fill);
}

.pf-topology__connector-x {
  stroke-width: 1;
  stroke: var(--edge--stroke);
}

.pf-topology-default-create-connector {
  cursor: pointer;
}

.pf-topology-default-create-connector__line {
  stroke: var(--pf-topology__create-connector-color--Stroke);
  stroke-width: 2px;
  stroke-dasharray: 3px, 3px;
}

.pf-topology-default-create-connector__arrow {
  fill: var(--pf-topology-default-create-connector__arrow--Fill);
  stroke: var(--pf-topology__create-connector-color--Stroke);
}

.pf-topology-default-create-connector.pf-m-hover .pf-topology-default-create-connector__line {
  stroke: var(--pf-topology-default-create-connector--m-hover--line--Stroke);
}

.pf-topology-default-create-connector.pf-m-hover .pf-topology-default-create-connector__arrow {
  fill: var(--pf-topology-default-create-connector--m-hover--arrow--Fill);
  stroke: var(--pf-topology-default-create-connector--m-hover--arrow--Stroke);
}

.pf-topology-default-create-connector__create {
}

.pf-topology-default-create-connector__create__bg {
  stroke-width: 10px;
  stroke: transparent;
  fill-opacity: 0;
}

.pf-topology-default-create-connector__create__cursor {
  fill: var(--pf-topology__create-connector-color--Fill);
}

.pf-topology-area-select-rect {
  fill: var(--pf-topology__area-select-rect--Fill);
  opacity: var(--pf-topology__area-select-rect--Opacity);
  stroke: var(--pf-topology__area-select-rect--Stroke);
  stroke-width: var(--pf-topology__area-select-rect--StrokeWidth);
  border: 1px dashed;
}