/*
  Flux Builder Styles
  ------------------------------------------------------------------------------
*/

$flux-builder-min-width: 440px;
$flux-node-height: 30px;
$flux-node-tooltip-gap: 4px;
$flux-connector-line: 2px;
$flux-node-gap: 30px;
$flux-node-padding: 10px;
$flux-arg-min-width: 120px;

$flux-func-color: $c-comet;
$flux-number-color: $c-hydrogen;
$flux-object-color: $c-viridian;
$flux-string-color: $c-honeydew;
$flux-boolean-color: $c-viridian;
$flux-invalid-color: $c-curacao;

$flux-func-hover: $c-moonstone;
$flux-number-hover: $c-neutrino;
$flux-object-hover: $c-rainforest;
$flux-string-hover: $c-wasabi;
$flux-boolean-hover: $c-rainforest;
$flux-invalid-hover: $c-dreamsicle;

$flux-builder-vis-height: 550px;
$flux-builder-yield-tabs-min-width: 180px;
$flux-builder-yield-tabs-max-width: 400px;

// Shared Node styles
%flux-node {
  min-height: $flux-node-height;
  border-radius: $radius;
  padding: 0 $flux-node-padding;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  background-color: $g4-onyx;
  transition: background-color 0.25s ease;
  margin-bottom: $flux-node-tooltip-gap / 2;
  margin-top: $flux-node-tooltip-gap / 2;
  &:hover {
    cursor: pointer;
    background-color: $g6-smoke;
  }
}

.body-builder--container {
  background-color: $g1-raven;
}

.body-builder {
  padding: $flux-node-height;
  padding-bottom: 0;
  min-width: $flux-builder-min-width;
  width: 100%;
}

.declaration {
  width: 100%;
  margin-bottom: $flux-node-gap;
  padding-bottom: $flux-node-gap;
  border-bottom: 2px solid $g2-kevlar;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
  &:last-of-type {
    margin-bottom: 0;
    border: 0;
  }
}

.variable-node {
  @extend %flux-node;
  color: $g11-sidewalk;
  line-height: $flux-node-height;
  white-space: nowrap;
  @include no-user-select();
  margin-top: 0;
  &:hover {
    background-color: $g4-onyx;
    cursor: default;
  }
}

.variable-node--connector {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: $c-pool;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: $flux-node-gap / 2;
  transform: translate(-50%, -50%);
  &:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: $flux-connector-line;
    height: $flux-node-gap;
    @include gradient-v($c-pool, $g4-onyx);
    transform: translateX(-50%);
  }
}

.variable-node--name {
  color: $c-pool;
  .variable-node--connector+& {
    margin-left: $flux-node-gap - $flux-node-padding;
  }
}

.variable-node--string,
.func-arg--string {
  color: $flux-string-color;
}

.variable-node--boolean,
.func-arg--boolean {
  color: $flux-boolean-color;
}

.variable-node--number,
.func-arg--number {
  color: $flux-number-color;
}

.variable-node--object,
.func-arg--object {
  color: $flux-object-color;
}

.variable-node--invalid,
.func-arg--invalid {
  color: $flux-invalid-color;
}

.func-node {
  @extend %flux-node;
  display: flex;
  align-items: center;
  margin-left: $flux-node-gap;
  cursor: pointer !important;

  &:hover,
  &.active {
    .func-node--preview {
      color: $g20-white;
    }
    .func-arg--string {
      color: $flux-string-hover;
    }
    .func-arg--boolean {
      color: $flux-boolean-hover;
    }
    .func-arg--number {
      color: $flux-number-hover;
    }
    .func-arg--invalid {
      color: $flux-invalid-hover;
    }
  }
}

.func-node--connector {
  width: $flux-node-gap;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  z-index: 0;
  pointer-events: none;

  // Connection Lines
  &:before,
  &:after {
    content: '';
    background-color: $g4-onyx;
    position: absolute;
  } // Vertical Line
  &:before {
    width: $flux-connector-line;
    height: calc(100% + #{$flux-node-tooltip-gap});
    top: -$flux-node-tooltip-gap / 2;
    left: $flux-node-gap / 2;
    transform: translateX(-50%);
  } // Horizontal Line
  &:after {
    height: $flux-connector-line;
    width: $flux-node-gap / 2;
    top: 50%;
    left: $flux-node-gap / 2;
    transform: translateY(-50%);
  }
}

// When a query exists unassigned to a variable
.func-node--wrapper:first-child .func-node {
  margin-left: 0;
  padding-left: $flux-node-gap;
  .func-node--connector {
    transform: translateX(0);
    z-index: 2; // Vertical Line
    &:before {
      height: $flux-node-gap;
      top: $flux-node-gap / 2;
      @include gradient-v($c-comet, $g4-onyx);
    } // Dot
    &:after {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: $c-comet;
      top: $flux-node-gap / 2;
      transform: translate(-50%, -50%);
    }
  }
}

.func-node--name,
.func-node--preview {
  font-size: 13px;
  white-space: nowrap;
  transition: color 0.25s ease;
  font-weight: 600;
  user-select: none;
}

.func-node--name {
  height: $flux-node-height;
  line-height: $flux-node-height;
  color: $flux-func-color;
  .func-node:hover &,
  .func-node.active & {
    color: $flux-func-hover;
  }
}

.func-node--preview {
  color: $g11-sidewalk;
  margin-left: 4px;
  padding: 5px 0;
  display: flex;
  align-items: center;
  .func-node:hover & {
    color: $g17-whisper;
  }
}

.func-node--wrapper {
  display: flex;
  align-items: center;
}

.func-node--menu {
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.25s ease;

  > button.btn,
  > .confirm-button {
    margin-left: 4px;
  }
}

.func-node--wrapper:hover .func-node--menu,
.func-node.editing + .func-node--menu,
.func-node.active + .func-node--menu {
  opacity: 1;
}

.func-node--editor {
  position: relative;
  margin-left: $flux-node-gap;
  margin-bottom: $flux-node-gap;
  margin-top: $flux-node-tooltip-gap / 2;
  background-color: $g3-castle;
  border-radius: $radius;
  padding: 6px;
  display: flex;
  align-items: stretch;
}

.func-node--editor .func-node--connector {
   // Vertical Line
  &:before {
    height: calc(100% + #{($flux-node-tooltip-gap / 2) + $flux-node-gap});
  }
   // Horizontal Line
  &:after {
    content: none;
  }
}

.func-arg--buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.func-node--build {
  width: 60px;
  margin-top: 4px;
}

.func-args {
  display: flex;
  flex-direction: column;
}

.func-arg {
  min-width: $flux-arg-min-width;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 4px;
  &:last-of-type {
    margin-bottom: 0;
  }
}

.func-arg--label {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: $g10-wolf;
  padding: 0 8px;
  @include no-user-select();
}

.func-arg--value {
  flex: 1 0 0;
}

.func-arg--textarea {
  overflow: hidden;
  width: 300px;
}

/*
  Filter Preview Styles
  ------------------------------------------------------------------------------
*/

$flux-filter-gap: 6px;
$flux-filter-unit: 26px;
$flux-filter-unit-wrapped: 34px;
$flux-filter-expression: $g3-castle;
$flux-filter-parens: $g5-pepper;

%flux-filter-style {
  height: $flux-filter-unit;
  line-height: $flux-filter-unit;
  border-style: solid;
  border-width: 0;
  transition: background-color 0.25s ease;
}

.flux-filter--key {
  @extend %flux-filter-style;
  background-color: $flux-filter-expression;
  border-radius: 3px 0 0 3px;
  padding-left: $flux-filter-gap;
}

.flux-filter--operator {
  @extend %flux-filter-style;
  text-transform: uppercase;
  padding: 0 ($flux-filter-gap / 2);
}

.flux-filter--value+.flux-filter--operator,
.flux-filter--paren-close+.flux-filter--operator {
  padding: 0 $flux-filter-gap;
}

.flux-filter--key+.flux-filter--operator {
  background-color: $flux-filter-expression;
}

.flux-filter--key+.flux-filter--operator+.flux-filter--value {
  background-color: $flux-filter-expression;
  border-radius: 0 3px 3px 0;
}

.flux-filter--value {
  @extend %flux-filter-style;
  padding-right: $flux-filter-gap;
  &.number {
    color: $flux-number-color;
  }
  &.string {
    color: $flux-string-color;
  }
  &.boolean {
    color: $flux-boolean-color;
  }
}

.flux-filter--paren-open,
.flux-filter--paren-close {
  @extend %flux-filter-style;
  height: $flux-filter-unit-wrapped;
  width: ($flux-filter-unit-wrapped - $flux-filter-unit) / 2;
  background-color: $flux-filter-parens;
  border: (($flux-filter-unit-wrapped - $flux-filter-unit) / 2) solid
    $flux-filter-expression;
  transition: border-color 0.25s ease;
}

.flux-filter--paren-open {
  border-right: 0;
  border-radius: 3px 0 0 3px;
}

.flux-filter--paren-close {
  border-left: 0;
  border-radius: 0 3px 3px 0;
}

%flux-filter-wrapped {
  position: relative;
  z-index: 2;
  background-color: $flux-filter-parens;
  transition: background-color 0.25s ease;

  &:before {
    content: '';
    width: 100%;
    height: $flux-filter-unit-wrapped;
    position: absolute;
    top: ($flux-filter-unit - $flux-filter-unit-wrapped) / 2;
    left: 0;
    border-style: solid;
    border-width: (($flux-filter-unit-wrapped - $flux-filter-unit) / 2) 0;
    border-color: $flux-filter-expression;
    z-index: -1;
    box-sizing: border-box;
    transition: border-color 0.25s ease;
  }
}

.flux-filter--paren-open+.flux-filter--key,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value {
  @extend %flux-filter-wrapped;
}

.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator {
  background-color: $flux-filter-expression;
  height: $flux-filter-unit-wrapped;
  line-height: $flux-filter-unit-wrapped;
}

.flux-filter--fancyscroll {
  min-width: 300px;
  min-height: 250px;
}

.flux-filter--helper-text {
  @include no-user-select();
  color: $g13-mist;
  font-size: 12px;
  font-weight: 500;
  padding-left: 20px;
}
// Func Node Active State (When node is before a yield)
.func-node.active {
  background-color: $c-star;

  .func-node--connector:after {
    @include gradient-h($g3-castle, $c-star);
  }

  .flux-filter--value.number {
    color: $flux-number-hover;
  }
  .flux-filter--value.string {
    color: $flux-string-hover;
  }
  .flux-filter--value.boolean {
    color: $flux-boolean-hover;
  }

  .flux-filter--key,
  .flux-filter--key + .flux-filter--operator,
  .flux-filter--key + .flux-filter--operator + .flux-filter--value {
    background-color: $c-amethyst;
  }

  .flux-filter--paren-open,
  .flux-filter--paren-close {
    border-color: $c-amethyst;
  }

  .flux-filter--paren-open+.flux-filter--key,
  .flux-filter--paren-open+.flux-filter--key+.flux-filter--operator,
  .flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value,
  .flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key,
  .flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator,
  .flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value,
  .flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key,
  .flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator,
  .flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value {
    background-color: $c-star;

    &:before {
      border-color: $c-amethyst;
    }
  }

  .flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator,
  .flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator {
    background-color: $c-amethyst;
  }
}

.yield-node--graph {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  background-color: $g3-castle;
  border-radius: 0 0 $radius $radius;
}

.yield-node {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(100% - #{$flux-node-gap});
  height: $flux-builder-vis-height;
  margin-bottom: $flux-node-tooltip-gap / 2;
  margin-top: $flux-node-tooltip-gap / 2;
  margin-left: $flux-node-gap;

  // Hide Horizontal Line
  & > .func-node--connector:after {
    content: none;
  }
}

.yield-node--controls {
  background-color: $g3-castle;
  padding: $flux-node-padding;
  border-radius: $radius $radius 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yield-node--name {
  font-size: 12px;
  font-weight: 600;
  margin-right: 6px;
  @include no-user-select();
  color: $c-honeydew;
}

.yield-node--visualization {
  display: flex;
  align-items: stretch;
  flex-wrap: none;
  width: 100%;
  height: 100%;
}
