$node-categories: ('attribute': var(--node-socket-attribute-color), 'color': var(--node-socket-rgba-color), 'converter': hsl(203deg, 100%, 70%), 'default': var(--node-socket-default-color), 'geometry': var(--node-socket-geometry-color), 'input': hsl(222deg, 70%, 50%), 'output': var(--node-category-input-color), 'shader': var(--node-socket-shader-color), 'vector': var(--node-socket-vector-color))
$socket-types: ('attribute': hsl(212, 100%, 67%), 'boolean': hsl(288deg, 38%, 75%), 'default': hsl(0deg, 0%, 50%), 'empty': hsl(0deg, 0%, 80%), 'float': hsl(122, 20%, calc(74% / 1)), 'geometry': hsl(166deg, 100%, 42%), 'image': hsl(43deg, 68%, 66%), 'int': hsl(122, 50%, calc(50% / 1)), 'normal': hsl(240deg, 47%, 68%), 'object': hsl(27deg, 81%, 65%), 'rgba': hsl(60deg, 66%, 47%), 'shader': hsl(356deg, 66%, 66%), 'string': hsl(55deg, 50%, 70%), 'vector': hsl(240deg, 50%, 73%))

//  Blender internal colors:

// 'int': hsl(210deg, 50%, 70%)
// 'shader': hsl(120deg, 47%, 58%)
//  Colletion: rgba(0.90, 0.90, 0.90, 1.00)
//  Object: rgba(0.85, 0.34, 0.10, 1.00)
//  Object Data: rgba(0.00, 0.65, 0.36, 1.00)
//  Modifiers: rgba(0.23, 0.47, 1.00, 1.00)
//  Shading: rgba(0.82, 0.17, 0.21, 1.00)
//  File Folders: rgba(0.76, 0.53, 0.15, 1.00)

\:root
  --node-editor-bg: #1A1A1A
  --node-editor-grid-color: #282828
  --node-editor-grid-size: 1.5rem
  --node-editor-grid-width: 8%

  --node-connection-distance: 5rem
  --node-wire-thickness: 2px

  --node-bg: #282828
  --node-border-radius: var(--wgt-border-radius)
  --node-box-shadow: 0 0 1rem rgba(var(--shadow-color), .25), .25rem .25rem 1rem rgba(var(--shadow-color), .25)
  --node-header-bg: #202020
  --node-width: 18rem // 15rem

  --node-border-color: #1f1f1f
  --node-active-border-color: #fff
  --node-selected-border-color: #ED5700
  --node-viewer-border-color: var(--accent-color)

  --node-active-box-shadow: 0 0 0 var(--border-width-lg) var(--node-active-border-color)
  --node-selected-box-shadow: 0 0 0 var(--border-width-lg) var(--node-selected-border-color)
  --node-viewer-box-shadow:  0 0 0 calc(var(--border-width-lg) * 3) var(--node-viewer-border-color)

  --node-body-padding-v: var(--spacer-xs)

  --node-entry-margin-v: .15rem
  --node-entry-margin-h: var(--spacer)
  --node-entry-separator-height: var(--spacer-sm)

  /* Node Categories. */
  @each $cat, $color in $node-categories
    --node-category-#{$cat}-color: #{$color}

  /* To be overriden per node category. */
  --node-category-color: var(--node-category-default-color)

  /* Node Sockets. */
  --node-socket-size: .75rem
  --node-socket-bg: cyan

  @each $type, $color in $socket-types
    --node-socket-#{$type}-color: #{$color}

  /* To be overriden per socket. */
  --node-socket-color: var(--node-socket-default-color)
  --node-socket-connected-from-color: var(--node-socket-color)

  /* To be used when socket types don't match. */
  --node-socket-error: hsl(0deg 75% 50%)


.nodes-editor
  background-color: var(--node-editor-bg)
  position: relative
  width: 100%

  *
    user-select: none

.nodes-context
  color: var(--wgt-color-inactive)
  font-size: var(--font-size-sm)
  padding: var(--spacer-sm)
  position: relative
  user-select: none
  z-index: 1

  .icon
    transform: scale(.85)

  > ul
    align-items: center
    display: flex
    list-style: none
    margin: 0
    padding: 0

    > li
      align-items: center
      display: flex

      &+li
        margin-left: var(--spacer-xs)

      &:last-child
        color: var(--wgt-color)

        .icon
          opacity: 1

/* Editor layout. */
.nodes-grid
  display: flex
  padding: var(--spacer-sm)

.nodes-grid-bg
  background-image: radial-gradient(var(--node-editor-grid-color) var(--node-editor-grid-width), transparent var(--node-editor-grid-width))
  background-size: var(--node-editor-grid-size) var(--node-editor-grid-size)
  bottom: 0
  left: 0
  position: absolute
  right: 0
  top: 0
  z-index: 0


/* Individual node. */
.node
  --node-border-category: calc(var(--wgt-border-width) * 1.5) solid var(--node-category-color)

  display: flex
  flex-direction: column
  height: fit-content
  margin: var(--spacer)
  position: relative
  width: var(--node-width)

  &:hover
    .node-label-text
      color: var(--wgt-color)

  /* Space between nodes when they are next to each other. */
  &+.node
    margin-left: var(--node-connection-distance)

  &.is-active
    box-shadow: var(--node-active-box-shadow), var(--node-box-shadow)

  &.is-selected
    box-shadow: var(--node-selected-box-shadow), var(--node-box-shadow)

  &.is-active, &.is-selected
    border-radius: var(--node-border-radius)

    .node-label-text
      color: var(--wgt-color)

  &.is-active, &.is-selected, &.is-viewer
    &.node-shape-input
      border-bottom-left-radius: var(--border-radius-lg)
    &.node-shape-output
      border-bottom-right-radius: var(--border-radius-lg)

  &.is-viewer
    border-radius: var(--node-border-radius)
    box-shadow: var(--node-viewer-box-shadow), var(--node-box-shadow)

    &.is-active
      box-shadow: var(--node-active-box-shadow), var(--node-viewer-box-shadow), var(--node-box-shadow)

    &.is-selected
      box-shadow: var(--node-selected-box-shadow), var(--node-viewer-box-shadow), var(--node-box-shadow)

  &.is-muted
    .node-body
      opacity: .5

  /* Shape inputs and outputs nodes differently. */
  &.node-shape-input .node-body
    border-bottom-left-radius: var(--border-radius-lg)

  &.node-shape-output .node-body
    border-bottom-right-radius: var(--border-radius-lg)

.node-body
  background-color: var(--node-bg)
  border: var(--border-width) solid var(--node-border-color)
  border-top: var(--node-border-category)
  border-top-left-radius: 0
  border-top-right-radius: 0
  border-radius: var(--node-border-radius)
  box-shadow: var(--node-box-shadow)
  padding-bottom: var(--node-body-padding-v)
  padding-top: var(--node-body-padding-v)

.node-header
  align-items: center
  // background-color: var(--node-header-bg)
  border-bottom: var(--wgt-border-width) solid var(--node-border-color)
  display: flex
  justify-content: space-between
  line-height: 1.5rem
  padding: var(--spacer-xs)
  white-space: nowrap

  .layout-row
    overflow: hidden
    width: unset

  .node-action-buttons
    opacity: .5

    &:hover
      opacity: initial

.node-label
  align-items: center
  background-color: var(--node-header-bg)
  border-bottom: var(--wgt-border-width) solid var(--node-border-color)
  border-top-left-radius: var(--node-border-radius)
  border-top-right-radius: var(--node-border-radius)
  cursor: grab
  display: flex
  padding: var(--spacer-xs) var(--spacer)

  &:hover
    .layout-row
      opacity: 1

  .layout-row
    opacity: 0
    width: initial

.node-label-text
  color: var(--wgt-color-inactive)
  cursor: grab
  // display: inline-block
  flex: 1
  font-size: var(--font-size-lg)
  overflow: hidden
  padding-right: var(--spacer-xs)
  text-overflow: ellipsis
  white-space: nowrap


=node-socket-align-left
  left: calc(calc(var(--node-socket-size) * -.5) - calc(var(--border-width) * 2))
  right: initial

=node-socket-align-right
  left: initial
  right: calc(calc(var(--node-socket-size) * -.5) - calc(var(--border-width) * 2))

  &:before
    display: none

.node-entry
  align-items: center
  // color: var(--wgt-color-inactive)
  color: var(--node-socket-color)
  cursor: default
  display: flex
  padding: var(--node-entry-margin-v) var(--node-entry-margin-h)
  position: relative

  &.is-connected
    // color: var(--wgt-color)
    position: relative

    &:before
      content: ''
      background-color: var(--node-socket-color)
      background-image: linear-gradient(90deg, var(--node-socket-connected-from-color), var(--node-socket-color))
      display: block
      height: var(--node-wire-thickness)
      left: calc(var(--node-connection-distance) * -1.16666)
      position: absolute
      width: calc(var(--node-connection-distance) + calc(var(--node-socket-size) * .5))
      z-index: 1

  &.is-output
    justify-content: flex-end

    &:before
      display: none

    .node-entry-value
      justify-content: flex-end

    .node-entry-socket
      +node-socket-align-right

  &.is-both-ways
   // justify-content: center

   /* If there is a socket after the value, align it to the right. */
   .node-entry-value+.node-entry-socket
      +node-socket-align-right

  &.is-socket-not-compatible
    &:before
      --node-socket-color: var(--node-socket-error)
      background-image: unset

    &.vdashed:before
      background-image: linear-gradient(90deg, var(--node-socket-error) 0%, var(--node-socket-error) 49%, var(--node-editor-bg) 50%, var(--node-editor-bg) 100%)
      background-size: 10px 10px

    &:after
      color: var(--node-socket-error)
      content: 'x'
      font-weight: bold
      left: calc(calc(calc(var(--node-connection-distance) + calc(var(--node-socket-size) * 1.66)) / 2) * -1)
      position: absolute
      text-shadow: 0 0 1px var(--node-editor-bg)
      box-shadow: 0 0 0 8px var(--node-editor-bg)
      background-color: var(--node-editor-bg)
      top: calc(var(--node-socket-size) * .1)
      z-index: 1

    &.v2:after
      content: '/'

    &.v3:after
      content: '//'
      left: calc(calc(calc(var(--node-connection-distance) + calc(var(--node-socket-size) * 2.5)) / 2) * -1)


  &.socket-type-empty
    .node-entry-socket
      border-color: var(--node-socket-empty-color)
      background-color: black

.node-entry-socket
  +node-socket-align-left

  background-color: var(--node-socket-color, var(--node-socket-default-color))
  border: var(--border-width) solid var(--node-bg)
  border-radius: 50%
  display: block
  content: ''
  height: var(--node-socket-size)
  position: absolute
  transition: transform ease-in-out var(--transition-speed)
  width: var(--node-socket-size)

  &:hover
    transform: scale(1.2)

  &.is-socket-not-compatible
    border-color: var(--node-socket-error)


.node-entry-value
  align-items: center
  display: flex
  flex: 1
  width: 100%

  > .wgt
    flex: 1
    justify-content: flex-start

  /* Color the label with the socket's color. */
  > .wgt-label
    color: var(--node-socket-color)


/* Build node-category classes. */
@each $cat, $color in $node-categories
  .node-cat-#{$cat}
    --node-category-color: var(--node-category-#{$cat}-color)

/* Build socket-type classes. */
@each $type, $color in $socket-types
  .socket-type-#{$type}
    --node-socket-color: var(--node-socket-#{$type}-color)

  /* Build socket-connected-to classes. */
  .is-connected-from-#{$type}
    --node-socket-connected-from-color: var(--node-socket-#{$type}-color)

.ui-section.nodes
  display: flex

/* Custom placeholders for demo purposes. */
/* Long connection between nodes to demo viewer and reroute. */
.placeholder-viewer-1
  top: calc(4rem + calc(var(--border-width) / 2))

  .node-entry
    &:before
      margin-left: calc(calc(var(--node-socket-size) / 2) * -1)
      width: calc(var(--node-width) * 1.66)

  .reroute
    background-color: var(--node-editor-bg)
    border-color: var(--node-socket-color)
    border-radius: 999rem
    left: 50%
    top: 50%
    transform: translate(-50%, -50%)
    width: calc(var(--node-socket-size) * 3)
    z-index: 1

    &:after
      content: ''
      display: block
      // background-color: var(--node-socket-color)
      background-image: linear-gradient(90deg, var(--node-socket-color) 50%, transparent 50%)
      background-size: calc(var(--node-socket-size) / 2)
      position: absolute
      left: 53.33%
      top: 50%
      transform: translate(-50%, -50%)
      width: calc(var(--node-socket-size) * 1.5)
      height: var(--border-width)
