$ifql-node-height: 30px;
$ifql-node-tooltip-gap: 4px;
$ifql-node-gap: 5px;
$ifql-node-padding: 10px;
$ifql-arg-min-width: 120px;
$ifql-number-color: $c-neutrino;
$ifql-string-color: $c-honeydew;
$ifql-boolean-color: $c-viridian;
$ifql-invalid-color: $c-viridian;
/*
  Shared Node styles
  ------------------
*/

%ifql-node {
  min-height: $ifql-node-height;
  border-radius: $radius;
  padding: 0 $ifql-node-padding;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  background-color: $g4-onyx;
  transition: background-color 0.25s ease;

  &:hover {
    background-color: $g6-smoke;
  }
}

.body-builder {
  padding: 30px;
  min-width: 440px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: $g1-raven;
}

.declaration {
  width: 100%;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.variable-string {
  @extend %ifql-node;
  color: $g11-sidewalk;
  line-height: $ifql-node-height;
  white-space: nowrap;
  @include no-user-select();
}

.variable-blank {
  font-style: italic;
}

.variable-name {
  color: $c-pool;
}

.variable-value--string {
  color: $ifql-string-color;
}

.variable-value--boolean {
  color: $ifql-boolean-color;
}

.variable-value--number {
  color: $ifql-number-color;
}

.variable-value--invalid {
  color: $ifql-invalid-color;
}

.func-node {
  @extend %ifql-node;
  display: flex;
  align-items: center;

  margin-left: $ifql-node-gap;

  // Connection Line
  &:after {
    content: '';
    height: 4px;
    width: $ifql-node-gap;
    background-color: $g4-onyx;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
  }

  &:first-child:after {
    content: none;
    margin-left: 0;
  }
}

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

.func-node--name {
  height: $ifql-node-height;
  line-height: $ifql-node-height;
  color: $c-comet;
  .func-node:hover & {
    color: $c-potassium;
  }
}

.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--tooltip,
.variable-name--tooltip {
  background-color: $g3-castle;
  border-radius: $radius;
  padding: 10px;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  position: absolute;
  top: calc(100% + #{$ifql-node-tooltip-gap});
  left: 0;
  z-index: 9999;
  box-shadow: 0 0 10px 2px $g2-kevlar; // Caret
  &:before {
    content: '';
    border-width: 9px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: $g3-castle;
    position: absolute;
    top: 0;
    left: $ifql-node-padding + 3px;
    transform: translate(-50%, -100%);
  } // Invisible block to continue hovering
  &:after {
    content: '';
    width: 80%;
    height: 7px;
    position: absolute;
    top: -7px;
    left: 0;
  }
}

.func-node--buttons {
  display: flex;
  margin-top: 12px;
}

.func-node--delete,
.func-node--build {
  width: 60px;
}

.func-node--sub .func-arg {
  min-width: $ifql-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-right: 8px;
  @include no-user-select();
}

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

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

.variable-name--tooltip {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.variable-name--input {
  width: 140px;
}

.variable-name--operator {
  width: 20px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-weight: 600;
  @include no-user-select();
}

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

$ifql-filter-gap: 6px;
$ifql-filter-unit: 26px;
$ifql-filter-unit-wrapped: 34px;
$ifql-filter-expression: $g3-castle;
$ifql-filter-parens: $g5-pepper;
%ifql-filter-style {
  height: $ifql-filter-unit;
  line-height: $ifql-filter-unit;
  border-style: solid;
  border-width: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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