@use "sass:math";

$autocomplete-padding: math.div($spacing-medium, 2);

$wrapper-background: $black2;

.entry {
  // headers need to be relative to position them. We need to be above
  // the headers, and position:relative allows us to do it.
  cursor: default;
  background: $wrapper-background;
  color: $white1;
  margin-left: 4px;
  margin-right: 4px;
  width: auto;

  /* width: 96px; // keeps autocomplete appearing when Creating */
  .types {
    text-transform: lowercase;
    font-family: monospace;
    font-size: 80%;
    color: $grey8;
  }

  form {
    // makes the form takes up no space in the DOM, meaning we don't
    // expand the top-level
    position: absolute;

    // account for the space of both input boxes
    margin-top: -12px;

    #search-container {
      background: $wrapper-background;
      border: 0;
      margin: 0;
      padding: 0;
      position: relative;

      #entry-box {
        // as much like the blank box as possible
        background: transparent;
        color: transparent;
        caret-color: $grey8;
        position: relative;
        text-align: left;
        vertical-align: baseline;
        width: 100%;
      }

      #suggestionBox {
        color: rgb(84, 84, 84);
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      #fluidWidthSpan {
        color: $grey8;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }
    }
  }

  #autocomplete-holder {
    font-size: 11.3px;
    max-height: 90px;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    text-align: initial;
    width: $toplevel-min-width - 10px;
    z-index: 1;
    background: $black3;
    @include border-radius-bottom($autocomplete-padding);

    .autocomplete-item {
      padding: 0 $autocomplete-padding;
      background: transparent;

      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: baseline;
      width: calc(100% - 10px);

      .atom {
        margin-left: 0;
      }

      &.highlighted {
        background: $highlight-color;
      }

      &.invalid {
        color: $grey8;

        &.highlighted {
          background: lighten($highlight-color, 50%);
          color: black;

          .moduleseparator {
            color: black;
          }
        }

        .name,
        .types,
        .module,
        .moduleseparator {
          text-decoration: line-through solid;
        }

        .moduleseparator {
          color: $grey8;
        }
      }
    }
  }
}

.omnibox {
  position: fixed;
  top: 200px;
  left: 40%;

  $box-width: 400px;
  $left-margin: 24px;

  // honestly couldnt tell you where this magic number comes from
  font-size: $code-font-size * 1.5;
  margin-top: -9px;

  .string-entry {
    margin-top: -21px;
  }

  .entry form #search-container {
    min-width: $box-width;
    background-color: $black3;
    padding: 0 $left-margin;
    @include border-radius-top(6px);

    #fluidWidthSpan {
      width: 100%;
      box-sizing: border-box;
      margin-left: $left-margin;

      &:before {
        display: inline-block;
        margin-left: -0.85 * $left-margin;
        margin-top: -$spacing-medium;
        // This is a magic amount of margin that ensures that the left of first
        // character is in line with the first character of the results
        margin-right: 4px;

        @include font-awesome($fa-search);
        color: $grey2;
        font-size: 16px;
      }
    }
  }

  ul#autocomplete-holder {
    width: 100%;
    max-height: unset;
    background-color: $wrapper-background;
    overflow-y: visible;
    list-style-type: none;
    @include border-radius-bottom(6px);

    li.autocomplete-item {
      font-size: $code-font-size;
      padding: 2px $left-margin;

      &.new-tl + .found-in,
      &.new-tl + .jump-to,
      &.found-in + .jump-to {
        margin-top: 10px;
      }
    }
  }
}

.selecting-command {
  ul#autocomplete-holder {
    @include border-radius-top(4px);
    @include border-radius-bottom(4px);
  }
}

.spec-header {
  display: relative;
}

.spec-header .more-actions {
  position: absolute;
  top: 8px;
  right: 4px;
  z-index: 10;
  direction: rtl;

  .toggle-btn {
    cursor: pointer;
  }

  .actions {
    display: none;
    margin-top: 5px;
    margin-right: -4px;
    padding-bottom: $spacing-medium;
    background: lighten($black2, 5%);
    cursor: auto;

    .item {
      padding-top: 2px;
      padding-bottom: 2px;
      padding-right: 4px;
      padding-left: 8px;
      color: $grey8;

      &:hover {
        cursor: pointer;
        background: darken($highlight-color, 15%);
      }

      &.disable {
        color: darken($grey8, 40%);

        &:hover {
          cursor: not-allowed;
          background: transparent;
        }
      }

      i.fa {
        margin-left: 4px;
        margin-right: 2px;
      }
    }
  }

  /* Actions menu opened */
  &.show .actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}
