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

::ng-deep db-management-flow {

  .f-background {
    circle {
      fill: var(--db-background-component-color);
    }
  }

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

    .f-connection-selection {
      fill: none;
      stroke: transparent;
      stroke-width: 20;
      cursor: pointer;
    }

    .f-connection-path {
      fill: none;
      stroke: var(--db-text-1);
      stroke-width: 2;
    }

    .f-marker {
      path, circle {
        fill: var(--db-text-1);
      }
    }

    &.f-selected {
      .f-connection-path {
        stroke: var(--db-primary-1);
      }

      .f-marker {
        path, circle {
          fill: var(--db-primary-1);
        }
      }
    }

    &:hover {
      .f-connection-selection {
        stroke: var(--db-primary-1);
        opacity: 0.1;
      }
    }


    &.f-snap-connection {
      .f-connection-path {
        stroke: var(--db-snap-connection);
        stroke-width: 2px;
      }

      .f-marker {
        path, circle {
          fill: var(--db-snap-connection);
        }
      }

      .f-connection-selection {
        fill: transparent !important;
        stroke: transparent !important;
      }
    }

    &.f-connection-for-create {
      .f-connection-selection {
        fill: transparent !important;
        stroke: transparent !important;
      }
    }
  }

  .f-line-alignment {
    .f-line {
      border: 0.5px dashed var(--db-line-alignment-color);
    }
  }

  .f-selection-area {
    background-color: var(--db-primary-soft);
  }

  .f-minimap {
    background-color: var(--db-background);
    bottom: 16px;
    right: 16px;
    width: 100px;
    height: 70px;

    .f-minimap-node, .f-minimap-group {
      fill: var(--db-text-1);

      &.f-selected {
        fill: var(--db-primary-2);
      }
    }

    .f-minimap-group {
      opacity: 0.5;
    }

    .f-minimap-view {
      fill: var(--db-primary-soft)
    }
  }
}

.f-group {
  display: block;
  background-color: var(--db-gray-soft);
  padding: 40px;

  .group-title {
    color: var(--db-text-1);
    font-size: 16px;
    position: absolute;
    top: 20px;
  }

  &.f-selected {
    border: 1px solid var(--db-primary-1);

    .f-resize-handle {
      display: block;
    }
  }
}

.f-resize-handle {
  --resize-handle-size: 16px;
  --resize-handle-offset: -8px;
  display: none;
  position: absolute;
  width: var(--resize-handle-size);
  height: var(--resize-handle-size);
  background-color: var(--db-background);
  border: 1px solid var(--db-primary-1);
  border-radius: 1px;

  &.f-resize-handle-left {
    top: 50%;
    left: var(--resize-handle-offset);
    cursor: col-resize;
  }

  &.f-resize-handle-left-top {
    top: var(--resize-handle-offset);
    left: var(--resize-handle-offset);
    cursor: nwse-resize;
  }

  &.f-resize-handle-top {
    top: var(--resize-handle-offset);
    left: 50%;
    cursor: row-resize;
  }

  &.f-resize-handle-right-top {
    top: var(--resize-handle-offset);
    right: var(--resize-handle-offset);
    cursor: nesw-resize;
  }

  &.f-resize-handle-right {
    top: 50%;
    right: var(--resize-handle-offset);
    cursor: col-resize;
  }

  &.f-resize-handle-right-bottom {
    bottom: var(--resize-handle-offset);
    right: var(--resize-handle-offset);
    cursor: nwse-resize;
  }

  &.f-resize-handle-bottom {
    bottom: var(--resize-handle-offset);
    left: 50%;
    cursor: row-resize;
  }

  &.f-resize-handle-left-bottom {
    bottom: var(--resize-handle-offset);
    left: var(--resize-handle-offset);
    cursor: nesw-resize;
  }
}
