@import "./vars"

.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: relative
  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
    background: $socket-color
    z-index: 2
    box-sizing: border-box
    &: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
  select, input
    width: 100%
    border-radius: 30px
    background-color: white
    padding: 2px 6px
    border: 1px solid #999
    font-size: 110%
    width: 170px