.SearchInput {
  flex: 1 1;
  display: flex;
  align-items: center;
}

.Input {
  flex: 1 1 100px;
  width: 100px;
  font-size: var(--font-size-sans-large);
  outline: none;
  border: none;
  background-color: var(--color-background);
  color: var(--color-text);
  padding-left: 1.5rem;
  margin-left: -1rem;
}

.InputIcon {
  pointer-events: none;
  z-index: 2;
  color: var(--color-dimmer);
}

.IndexLabel {
  color: var(--color-dim);
  font-size: var(--font-size-sans-normal);
  white-space: pre;
}

/* Shown while the (deferred) search is still computing matches. */
.Spinner {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.25rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-dim);
  border-radius: 50%;
  animation: SearchInput-spin 0.6s linear infinite;
}

@keyframes SearchInput-spin {
  to {
    transform: rotate(360deg);
  }
}

.IndexInput {
  color: var(--color-text);
  font-size: var(--font-size-sans-normal);
  font-family: inherit;
  text-align: center;
  background: none;
  /* A visible border so it's clear this number can be edited. */
  border: 1px solid var(--color-border);
  border-radius: 0.125rem;
  outline: none;
  padding: 0 0.25rem;
  margin: 0;
  /* Keep a floor so the box doesn't shrink/jitter as the digit count changes. */
  min-width: 1.5ch;
}

/* AutoSizeInput sizes the element width to fit the text exactly (assuming no
   padding/border). content-box makes our padding + border add around that
   width rather than eating into it and clipping digits. The descendant
   selector raises specificity above the global `.DevTools *` border-box rule,
   which otherwise wins by source order at equal specificity. */
.IndexLabel .IndexInput {
  box-sizing: content-box;
}

.IndexInput:focus {
  background-color: var(--color-button-background-focus);
}

.LeftVRule{
  height: 20px;
  width: 1px;
  background-color: var(--color-border);
}
.LeftVRule {
  margin: 0 0.25rem 0 0.5rem;
}