:host {
  padding: 2px;
  --connector-size: 10px;
  --connector-offset: -5px;

  .f-node-outlet {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid var(--blue4);
    border-radius: 50%;
    width: var(--connector-size);
    height: var(--connector-size);

    &.f-outlet-left {
      left: var(--connector-offset);
      top: 50%;
      transform: translateY(-50%);
    }

    &.f-outlet-right {
      right: var(--connector-offset);
      top: 50%;
      transform: translateY(-50%);
    }

    &.f-outlet-top {
      top: var(--connector-offset);
      left: 50%;
      transform: translateX(-50%);
    }

    &.f-outlet-bottom {
      bottom: var(--connector-offset);
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .f-resize-handle {
    display: none;
    position: absolute;
    width: var(--connector-size);
    height: var(--connector-size);
    background-color: white;
    border: 1px solid var(--blue4);
    border-radius: 1px;

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

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

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

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

  &.f-selected {
    outline: 1px solid var(--blue4);

    .f-node-outlet {
      display: block;
    }

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

  .f-node-output, .f-node-input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

.s-node-rect {
  position: relative;
  width: 100%;
  height: 100%;

  f-image {
    width: 100%;
    height: 100%;
  }

  .s-node-image {
    pointer-events: none;
  }
}



