.fn-header {
  padding-bottom: $spacing-small;
  border-bottom: 1px dashed darken($user-functions, 30%);
  margin-bottom: $spacing-small;

  .spec-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    flex-direction: row;
    border-bottom: 1px solid $user-functions;
    cursor: default;

    .di-fn {
      font-size: 12px;
      color: $cyan;
    }
    .entry {
      form {
        margin-top: 0;
        position: relative;

        #search-container {
          min-width: 0;
        }
      }
    }

    .fn-readonly {
      color: $user-functions;
    }

    .fn-actions .more-actions .toggle-btn {
      color: $user-functions;
    }

    .execution-button {
      color: $grey1;
      cursor: not-allowed;

      &.is-ready {
        color: $user-functions;
        cursor: pointer;
      }

      @include is-executing();
    }
  }

  .params {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .param-divider {
      font-size: 10px;
      height: 15px;
    }

    .name,
    .type {
      flex: 1;
      font-size: 10px;
      height: 15px;
      margin-left: 4px;
      margin-right: 4px;
      padding-left: 1ch;
      padding-right: 1ch;

      #search-container {
        font-size: 10px;
        height: 10px;
        margin-bottom: -1px;
        margin-left: -6px;
        min-width: calc(#{"100% + 12px"});
        padding-bottom: 5px;
      }

      &.blank {
        height: 15px;
      }

      .entry {
        background: transparent;
        // Don't center text-entry, it makes everything weird
        text-align: left;

        form {
          margin-top: 0;
          position: relative;
        }
      }
    }
  }

  .col.param {
    width: 100%;
    padding: 0 $spacing-medium;
    box-sizing: border-box;

    &.dragging {
      opacity: 0.3;
    }

    &.just-moved {
      animation-duration: 0.5s;
      animation-name: blinkGlow;
      animation-iteration-count: 3;
      animation-direction: alternate;
    }

    i.fa-grip-lines {
      color: $grey1;
      font-size: 12px;
      cursor: ns-resize;
      margin-right: 6px;
    }
  }

  .col.space {
    height: 1em;
    width: 100%;

    &.over {
      border: dashed 1px $grey2;
      background-color: $black1;
    }
  }

  .col.new-parameter {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.5em;
    padding: 0 $spacing-medium;

    .parameter-btn.add i {
      margin-right: 8px;
    }

    .btn-label {
      color: $grey8;
      font-style: italic;
      font-size: 0.7 * $code-font-size;
      width: calc(90% - 16px);
    }

    &:hover {
      cursor: pointer;
      .parameter-btn.add i,
      .btn-label {
        color: $green;
      }
    }
  }

  #fnreturn {
    margin-top: 0.5em;

    i.fa {
      font-size: 12px;
      transform: rotate(90deg);
      margin-right: 4px;
    }
  }
}
