.tab-completion-temporary {
  margin-top: 0.375em;
  font-size: 0.75em;
}

.tab-completion-temporary .tab-completion-scroll-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.tab-completion-temporary .tab-completion-scroll-container > div {
  padding: 0.875em 1em;
  text-decoration: none;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  border-top: 2px solid transparent;
  transition: all 300ms ease-in-out;
}

.tab-completion-temporary .tab-completion-scroll-container > div:nth-last-child(2):first-child,
.tab-completion-temporary
  .tab-completion-scroll-container
  > .tab-completion-option:nth-last-child(2):first-child
  ~ .tab-completion-option {
  /* 5 entries in the tab completion list? */
  max-width: 50%;
}
.tab-completion-temporary .tab-completion-scroll-container > div:nth-last-child(3):first-child,
.tab-completion-temporary
  .tab-completion-scroll-container
  > .tab-completion-option:nth-last-child(3):first-child
  ~ .tab-completion-option {
  /* 5 entries in the tab completion list? */
  max-width: 33%;
}
.tab-completion-temporary .tab-completion-scroll-container > div:nth-last-child(4):first-child,
.tab-completion-temporary
  .tab-completion-scroll-container
  > .tab-completion-option:nth-last-child(4):first-child
  ~ .tab-completion-option {
  /* 4 entries in the tab completion list? */
  max-width: 25%;
}
.tab-completion-temporary .tab-completion-scroll-container > div:nth-last-child(5):first-child,
.tab-completion-temporary
  .tab-completion-scroll-container
  > .tab-completion-option:nth-last-child(5):first-child
  ~ .tab-completion-option {
  /* 5 entries in the tab completion list? */
  max-width: 20%;
}
.tab-completion-temporary .tab-completion-scroll-container > div:nth-last-child(n + 6),
.tab-completion-temporary
  .tab-completion-scroll-container
  > .tab-completion-option:nth-last-child(n + 6)
  ~ .tab-completion-option {
  /* more than 6 entries in the tab completion list? */
  width: 20%;
}

.tab-completion-temporary .tab-completion-scroll-container > div > .tab-completion-temporary-fill {
  /* the clickable should fill available horizontal space in a completion row */
  flex: 1;
}

.tab-completion-temporary .clickable {
  text-decoration: none;
  transition: 250ms;
}

/* selection */
.tab-completion-temporary .tab-completion-scroll-container > div.selected,
.tab-completion-temporary .tab-completion-scroll-container > div:hover {
  background-color: var(--color-stripe-02);
  border-color: var(--active-tab-color);
}
.tab-completion-temporary .tab-completion-scroll-container > div:hover .clickable,
.tab-completion-temporary .tab-completion-scroll-container > div.selected .clickable {
  color: var(--color-base0C);
}

/* prefix match of tab completion entries */
.tab-completion-option-pre {
  color: var(--color-base0C);
  font-weight: 600;
}

/* with bottom input, we would like to have the tab completion temporary flush to the bottom input */
.kui--bottom-input .repl-inner {
  display: flex;
  flex-direction: column;
}
.kui--bottom-input .repl .repl-block.repl-active {
  display: flex;
  flex: 1;
}
.kui--bottom-input .repl .repl-block {
  display: block;
}
.kui--bottom-input .tab-completion-temporary {
  flex: 1;
  display: flex;
  align-items: flex-end;
}