@import "../../lib/common.scss";

.ins-view {
  user-select: none;

  .pin-container {
    position: relative;

    &.inputs {
      padding-left: 6px;
    }

    &.outputs {
      padding-right: 6px;
    }
  }

  &.inline-node-edited {
    z-index: 2; // otherwise other instances get rendered on top of inline node editor

    > .base-node-view .base-node-view-inner {
      overflow: hidden;
    }

    @at-root {
      .inline-group-editor-container {
        width: 80%;
        height: 85vh;
        left: 10%;
        top: 7.5%;

        > header {
          font-size: 20px;
          font-weight: 600;
          text-align: center;
          padding: 4px 15px 3px;
          user-select: none;
          z-index: 1;
        }

        > main {
          flex: 1;
          display: flex;
          flex-direction: column;
          position: relative;
          overflow: hidden;
        }

        > main > .visual-node-editor {
          flex: 1;
          display: flex;
          position: relative;
          overflow: hidden;
        }
      }
    }
  }

  &[data-node-id="Note"] {
    .base-node-view-inner {
      width: 350px;
    }
  }
}

.__react_component_tooltip.instance-info-tooltip {
  font-size: 14px;
  max-width: 400px;
}