:host {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

::ng-deep vp-flow {

  .f-line-alignment {
    .f-line {
      background-color: var(--vp-line-alignment-color);
    }
  }

  .f-background {
    circle {
      fill: var(--vp-line-alignment-color);
    }
  }

  .f-connection {

    .f-connection-drag-handle {
      fill: transparent;
    }

    .f-connection-selection {
      stroke-width: 20px;
      fill: none;
    }

    &:hover {
      .f-connection-selection {
        stroke: var(--vp-connection-selection-color);
      }
    }

    .f-connection-path {
      stroke-width: 2px;
      fill: none;
    }

    &.f-connection-for-create {
      .f-connection-path {
        stroke: var(--vp-connection-for-create-path);
        stroke-width: 2px;
      }
    }

    .f-connection-text {
      fill: var(--vp-connection-text-color);
      font-size: 12px;
    }

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

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

  .f-selection-area {
    background-color: var(--vp-selection-area-color);
  }

  .f-minimap {
    background-color: var(--vp-minimap-color);
    bottom: 16px;
    right: 16px;
    width: 140px;
    height: 120px;

    .f-minimap-node {
      fill: var(--vp-minimap-node-color);

      &.f-selected {
        fill: var(--vp-minimap-selected-node-color);
      }
    }

    .f-minimap-view {
      fill: var(--vp-minimap-view-color)
    }
  }
}
