1 files changed, 131 insertions, 0 deletions
diff --git a/asset/css/search-base.less b/asset/css/search-base.less
new file mode 100644
index 0000000..3fe99d8
--- /dev/null
+++ b/asset/css/search-base.less
@@ -0,0 +1,131 @@
+// Style
+.search-suggestions {
+  background: var(--suggestions-bg, @suggestions-bg);
+  border: 1px solid var(--suggestions-border-color, @suggestions-border-color);
+  border-bottom-right-radius: .5em;
+  border-bottom-left-radius:  .5em;
+
+  > ul {
+    list-style-type: none;
+
+    > li {
+      border-top: 1px solid var(--suggestions-separation-bg, @suggestions-separation-bg);
+    }
+    > li.suggestion-title + li {
+      border: none;
+    }
+    > li:not(.default) + li.suggestion-title {
+      border: none;
+    }
+  }
+
+  .default {
+    color: var(--suggestions-default-opt-color, @suggestions-default-opt-color);
+    font-style: italic;
+
+    [type="button"] {
+      background-color: var(--suggestions-default-opt-bg, @suggestions-default-opt-bg);
+    }
+  }
+
+  .suggestion-title {
+    color: var(--suggestions-color, @suggestions-color);
+    font-size: 80%;
+  }
+
+  .failure-message {
+    font-weight: bold;
+
+    em {
+      font-weight: normal;
+      color: var(--suggestions-failure-message-color, @suggestions-failure-message-color);
+    }
+  }
+
+  .nothing-to-suggest {
+    color: var(--suggestions-color, @suggestions-color);
+  }
+
+  .relation-path {
+    padding: 0 .2em;
+    background-color: var(--suggestions-relation-path-bg, @suggestions-relation-path-bg);
+  }
+
+  [type="button"] {
+    .appearance(none);
+    border: none;
+    background: none;
+  }
+
+  [type="button"]:focus {
+    background: var(--suggestions-focus-bg, @suggestions-focus-bg);
+    color: var(--suggestions-focus-color, @suggestions-focus-color);
+    outline: none;
+
+    .relation-path {
+      background-color: var(--suggestions-relation-path-focus-bg, @suggestions-relation-path-focus-bg);
+    }
+  }
+
+  [type="button"]:not(:focus):hover {
+    background: var(--suggestions-hover-bg, @suggestions-hover-bg);
+  }
+}
+
+// Layout
+.search-suggestions {
+  z-index: 2; // Required so that nothing else can overlap it (such as opaque elements and the impact overlay)
+  position: absolute;
+  overflow: auto;
+  min-width: 5em;
+
+  &:empty {
+    display: none;
+  }
+
+  > ul {
+    margin: 0;
+    padding: 0;
+
+    li.suggestion-title {
+      padding: 1.25em .625em 0 .625em;
+    }
+
+    li.failure-message {
+      padding: .5em 1em;
+
+      em {
+        margin-right: .5em;
+      }
+    }
+
+    li.nothing-to-suggest {
+      padding: .5em 1em;
+    }
+  }
+
+  [type="button"] {
+    padding: .5em 1em;
+    display: block;
+    width: 100%;
+    text-align: left;
+
+    &[data-class="operator"], &[data-class="logical_operator"] {
+      text-align: center;
+    }
+
+    &.has-details {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+    }
+
+    .relation-path {
+      margin-left: .5em;
+
+      &::first-line {
+        font-size: .8em;
+      }
+    }
+  }
+}