/*
    Flux Add Function Button
    ----------------------------------------------------------------------------
*/

$flux-func-selector--gap: 10px;
$flux-func-selector--height: 30px;

.flux-func--selector {
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: column;

  &.open {
    z-index: 9999;
    height: $flux-func-selector--height + $flux-func-selector--gap;
  }
}

.func-selector--connector {
  width: $flux-node-gap;
  height: $flux-func-selector--gap;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    top: -130%;
    width: $flux-connector-line;
    left: 50%;
    height: 230%;
    transform: translateX(-50%);
    @include gradient-v($g4-onyx, $c-pool);
  }
}

.btn.btn-sm.flux-func--button {
  border-radius: 50%;
  float: left;
  &:focus {
    box-shadow: 0 0 8px 3px $c-amethyst;
  }
}

.flux-func--autocomplete,
.flux-func--list {
  position: absolute;
  width: 166px;
}

.flux-func--autocomplete {
  left: 0;
  top: 0;

  .func-selector--connector + & {
    top: $flux-func-selector--gap;
  }
}

.flux-func--list {
  left: 0;
  border-radius: $radius;
  top: $flux-func-selector--height;
  padding: 0;
  margin: 0;
  @extend %no-user-select;
  @include gradient-h($c-star, $c-pool);
}

.flux-func--item {
  height: 28px;
  line-height: 28px;
  padding: 0 11px;
  margin: 0;
  font-size: 13px;
  color: $c-neutrino;

  &:first-child {
    border-radius: 4px 4px 0 0;
  }

  &:last-child {
    border-radius: 0 0 4px 4px;
  }

  &.active {
    @include gradient-h($c-comet, $c-laser);
    color: $g20-white;
  }

  &:hover {
    cursor: pointer;
  }

  &.empty {
    font-style: italic;
    color: $c-hydrogen;
  }
}
