@import "./vars"
@import "./contextmenu"

.node-editor
  overflow: hidden
  background: transparent
  text-align: left
  *
    box-sizing: border-box
  .node
    background: $node-color
    border: 2px solid #4e58bf
    border-radius: 10px
    cursor: pointer
    min-width: $node-width
    height: auto
    padding-bottom: 6px
    box-sizing: content-box
    position: absolute
    user-select: none
    &:hover
      background: lighten($node-color,4%)
    &.selected
      background: $node-color-selected
      border-color: #e3c000
    .title
      color: white
      font-family: sans-serif
      font-size: 18px
      padding: 8px
    .socket
      display: inline-block
      cursor: pointer
      border: 1px solid white
      border-radius: $socket-size/2.0
      width: $socket-size
      height: $socket-size
      margin: $socket-margin
      vertical-align: middle
      z-index: 2
      &:hover
        border-width: 4px
      &.multiple
        border-color: yellow
      &.output
        margin-right: - $socket-size / 2
      &.input
        margin-left: - $socket-size / 2
    .input-title,.output-title
      vertical-align: middle
      color: white
      display: inline-block
      font-family: sans-serif
      font-size: 14px
      margin: $socket-margin
      line-height: $socket-size
    .input-control
      z-index: 1
      width: calc(100% - #{$socket-size + 2*$socket-margin})
      vertical-align: middle
      display: inline-block
    .control
      padding: $socket-margin $socket-size/2 + $socket-margin

  .group
    border-radius: 16px
    background: $group-color
    cursor: pointer
    width: inherit
    height: inherit
    border: 6px solid transparent
    position: absolute
    &.selected
      border-color: #ffd92c
    .group-title
      color: white
      font-family: sans-serif
      font-size: 18px
      padding: 12px
    .group-handler
      background: transparent
      width: $group-handler-size
      height: $group-handler-size
      position: absolute
      =handler($w,$h,$direction)
        &.#{$w}.#{$h}
          cursor: #{$direction}-resize
          #{$w}: $group-handler-offset
          #{$h}: $group-handler-offset
      +handler(right,bottom,se)
      +handler(left,top,nw)
      +handler(right,top,ne)
      +handler(left,bottom,sw)
  .connections
    position: absolute
    overflow: visible
    pointer-events: none
    .connection
      fill: none
      stroke: steelblue
      stroke-width: 5px
      pointer-events: none
      &.selected
        stroke: powderblue  

  select, input
    width: 100%
    border-radius: 30px
    background-color: white
    padding: 2px 6px
    border: 1px solid #999
    font-size: 110%