.git-query-editor {
    position: relative;
    min-width: 0;
}

/* The global-search hero normally clips its decorative background. Let the
   focused query editor's listbox escape that boundary without changing the
   resting layout. */
.git-search-hero:focus-within,
.git-search-hero:has(.git-query-editor__suggestions:not([hidden])) {
    overflow: visible;
}

.input-group > .git-query-editor,
.git-search-command label > .git-query-editor,
.git-app-search > .git-query-editor,
.git-app-mobile-search > .git-query-editor {
    min-width: 0;
    flex: 1 1 auto;
}

.git-app-search > .git-query-editor,
.git-app-mobile-search > .git-query-editor {
    width: 100%;
    border-radius: .7rem;
    background: color-mix(in srgb, var(--bg-color) 84%, var(--text-color) 3%);
}

.git-app-mobile-search > .git-query-editor {
    border-radius: .65rem;
    background: color-mix(in srgb, var(--bg-color) 90%, var(--text-color) 4%);
}

.input-group > .git-query-editor {
    width: 1%;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    background: var(--bs-body-bg, var(--bg-color));
}

.git-query-editor > input {
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent !important;
    color: transparent !important;
    caret-color: var(--text-color);
}

.git-query-editor > input::selection {
    background: color-mix(in srgb, var(--main-color) 30%, transparent);
}

.git-query-editor > input::placeholder {
    color: var(--text-secondary-color) !important;
    opacity: 1;
}

.input-group > .git-query-editor > .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.git-query-editor__mirror {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    border-style: solid;
    border-color: transparent;
    color: var(--text-color);
    pointer-events: none;
    white-space: pre;
}

/* The native input owns the real caret while this mirror paints the tokens.
   Every token must inherit identical font metrics or the caret drifts away
   from the visible text as the query grows. */
.git-query-token {
    font-weight: inherit;
}

.git-query-token--key {
    color: color-mix(in srgb, var(--main-color) 74%, var(--text-color));
}

.git-query-token--separator {
    color: var(--text-secondary-color);
}

.git-query-token--value {
    color: color-mix(in srgb, #2da44e 78%, var(--text-color));
}

.git-query-token--type {
    color: color-mix(in srgb, #2f81f7 78%, var(--text-color));
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, #2f81f7 38%, transparent);
    text-underline-offset: .18em;
}

.git-query-token--excluded {
    color: var(--bs-danger);
}

.git-app-search > i,
.git-app-search > kbd,
.git-app-mobile-search > i {
    z-index: 2;
    pointer-events: none;
}

.git-app-search .git-query-editor__suggestions,
.git-app-mobile-search .git-query-editor__suggestions {
    width: min(34rem, calc(100vw - 2rem));
}

.git-query-editor__suggestions {
    position: absolute;
    z-index: 1100;
    top: calc(100% + .38rem);
    left: 0;
    width: min(100%, 34rem);
    max-height: 19rem;
    overflow-y: auto;
    padding: .35rem;
    border: 1px solid color-mix(in srgb, var(--main-color) 35%, var(--git-border, var(--border-color)));
    border-radius: 9px;
    background: var(--git-panel, var(--bg-color));
    box-shadow: 0 14px 36px color-mix(in srgb, #000 24%, transparent);
}

.git-query-editor__suggestions[hidden] {
    display: none;
}

.git-query-editor__suggestions button {
    display: grid;
    grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .48rem .58rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-color);
    text-align: left;
}

.git-query-editor__suggestions button:hover,
.git-query-editor__suggestions button.active {
    background: color-mix(in srgb, var(--main-color) 13%, transparent);
}

.git-query-editor__suggestions code {
    color: var(--main-color);
    font-size: .8rem;
    font-weight: 720;
}

.git-query-editor__suggestions span {
    overflow: hidden;
    color: var(--text-secondary-color);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}