.terminal-current-preview > .terminal-results,
.terminal-completion {
  max-block-size: 40dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.terminal-completion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  inline-size: min(100%, 46rem);
  padding: 0;
  margin: var(--space-2) 0 0 var(--space-3);
  list-style: none;
}

.terminal-completion-option {
  display: grid;
  grid-template-columns: auto minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  min-inline-size: 0;
  min-block-size: 2.75rem;
  padding: var(--space-1) var(--space-2);
  color: var(--text);
  cursor: pointer;
  overflow-wrap: anywhere;
  scroll-margin: var(--space-2);
}

.terminal-completion-option::before {
  inline-size: 1ch;
  margin-inline-end: var(--space-2);
  color: var(--prompt-dim);
  content: "›";
}

.terminal-completion-option[aria-selected="true"]::before {
  color: var(--active-text);
}

.terminal-completion-option:hover {
  background: var(--hover-bg);
}

.terminal-completion-option:hover .terminal-completion-description {
  color: var(--text);
}

.terminal-completion-option[aria-selected="true"] {
  background: var(--active-bg);
  color: var(--active-text);
}

.terminal-completion-label {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal-completion-description {
  min-inline-size: 0;
  margin-inline-start: var(--space-3);
  overflow: hidden;
  color: var(--muted);
  font-size: 0.875em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal-completion-option[aria-selected="true"] .terminal-completion-description {
  color: var(--active-text);
}