/**
 * Copyright (c) 2024-2025 Lean FRO LLC. All rights reserved.
 * Released under Apache 2.0 license as described in the file LICENSE.
 * Author: Jakob Ambeck Vase
 */

:root {
    --selected-color: var(--verso-selected-color, #def);
}

@media screen and (700px < width) {
    :root {
        --search-bar-width: 24rem;
    }
}

@media screen and (width <= 700px) {
    :root {
        --search-bar-width: 12rem;
    }
}

#search-wrapper .combobox-list {
    position: relative;
}

#search-wrapper .combobox .group {
    display: flex;
    cursor: pointer;
}

#search-wrapper .combobox .cb_edit {
    background-color: var(--verso-background-color, white);
    color: var(--verso-text-color, black);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    border: none;
    border-bottom: 1px solid gray;
    position: relative;
    cursor: pointer;
    width: var(--search-bar-width);
    outline: none;
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    font-family: system-ui, sans-serif;
    /* Fix firefox eating spaces in textContent */
    white-space: -moz-pre-space;
}

#search-wrapper .combobox .group.focus .cb_edit,
#search-wrapper .combobox .group .cb_edit:hover {
    background-color: var(--selected-color);
    outline: auto;
}

/* Make the `placeholder` attribute visible even though the search
   box is a div. */
#search-wrapper .cb_edit:empty:before {
    content: attr(placeholder);
    pointer-events: none;
    color: #888;
    font-family: sans-serif;
    display: block;
}

#search-wrapper ul[role="listbox"] {
    margin: 0;
    padding: 0;
    position: absolute;
    top: calc(100%);
    width: var(--search-bar-width);
    list-style: none;
    background-color: var(--verso-background-color, white);
    color: var(--verso-text-color, black);
    display: none;
    box-sizing: border-box;
    border: 2px currentcolor solid;
    max-height: 20rem;
    overflow: scroll;
    overflow-x: hidden;
    font-size: 0.9rem;
    z-index: 100;
}

/* Applies to all `li` in the box, including "no results" and "showing x/y" */
#search-wrapper ul[role="listbox"] li {
    font-family: sans-serif;
    padding: 0.2rem;
    margin: 0;
}

/* The rules below apply wherever a result list appears. Both the quick-jump combobox and
   the full-page search view carry the `.verso-search-results` class, and styling the items
   once for both contexts keeps the two views visually consistent without forcing either
   one to know about the other. The combobox-only chrome above (popup positioning, the
   aria-selected highlight, and the per-listbox-item padding) stays scoped to `#search-wrapper`,
   since those rules would be either meaningless or actively wrong on the full-page view. */
.verso-search-results .search-result {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    font-weight: 400;
    cursor: pointer;

    /* Make the 'Showing 1/2 results' visible when navigating with keyboard. */
    scroll-margin-bottom: 1.2rem;
}

/* Each result wraps its contents in an <a> so the destination is exposed to keyboards
   and assistive tech (middle-click / open-in-new-tab also work). The anchor mirrors
   its parent's flex column so the existing `.search-result` layout stays intact and
   descendant rules (`.search-result p`, `.search-result .domain`, etc.) still match. */
.search-result > .search-result-link {
    display: flex;
    flex-direction: inherit;
    gap: inherit;
    color: inherit;
    text-decoration: none;
}

/* `display: contents` on the anchor would be simpler, but Chromium refuses to move
   programmatic focus onto a `display: contents` element, breaking keyboard activation. */

/* Couple the domain tighter with the search term on smaller screens,
   otherwise it's easy to get lost in the results. */
@media screen and (max-width: 700px) {
    .verso-search-results .search-result {
        gap: 0;
        padding: 0.3rem 0.2rem;
    }
}

.verso-search-results .search-result.full-text {
    font-family: var(--verso-text-font-family);
}
.verso-search-results .search-result.full-text .header {
    display: block;
}
.verso-search-results .search-result.full-text .header,
.verso-search-results .search-result.full-text .header em {
    font-style: normal;
    font-family: var(--verso-structure-font-family);
    font-weight: bold;
}

#search-wrapper [role="listbox"].focus li[aria-selected="true"],
#search-wrapper .search-result:hover {
    background-color: var(--selected-color);
    padding-bottom: calc(0.2rem - 1px);
    padding-top: calc(0.2rem - 1px);
    border-bottom: 1px solid currentColor;
    border-top: 1px solid currentColor;
}

/* Couple the domain tighter with the search term on smaller screens,
   otherwise it's easy to get lost in the results. */
@media screen and (max-width: 700px) {
    #search-wrapper [role="listbox"].focus li[aria-selected="true"],
    #search-wrapper .search-result:hover {
        padding-bottom: calc(0.3rem - 1px);
        padding-top: calc(0.3rem - 1px);
    }
}

.verso-search-results .search-result p {
    margin: 0;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
}

/* The two views highlight matched characters differently: the combobox underlines them,
   while the full-page view wraps them in a tinted background. Each treatment therefore
   lives with the context it applies to rather than being shared. */
#search-wrapper .search-result em {
    font-style: normal;
    text-decoration: underline;
}

.verso-search-results .search-result .domain em {
    font-style: italic;
}

.verso-search-results .search-result .domain {
    color: var(--verso-muted-color, #777);
    font-style: italic;
    font-family: var(--verso-structure-font-family);
    font-weight: normal;
    font-size: 0.7rem;
}

/* The combobox dropdown is narrow, and right-aligning the domain label reads more cleanly
   next to the matched search term. The full-page view is much wider and works better with
   the browser's default start-aligned flow, so this alignment stays scoped to the combobox. */
#search-wrapper .search-result .domain {
    text-align: right;
}

.verso-search-results .search-result .domain.text-context {
    /* For full-text search results, truncate on the left with an ellipsis */
    text-overflow: ellipsis;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
}

.verso-search-results .search-result .domain .context-elem {
    display: inline-block;
}

.verso-search-results .search-result .domain .context-elem:not(:last-child)::after {
    content: "»";
    margin: 0 0.25em;
}

/* On narrow screens the right-aligned domain label drifts far enough from the search term
   it belongs to that the association becomes hard to follow, so we flip it back to the
   default alignment. Because the `text-align: right` this is undoing is combobox-only,
   the override is scoped to the combobox as well. */
@media screen and (max-width: 700px) {
    #search-wrapper .search-result .domain {
        text-align: left;
    }
}

#search-wrapper .more-results {
    text-align: center;
    color: #777;
    font-size: 0.7rem;
}

#search-wrapper .domain-filter label {
    display: flex;
    gap: 0.5rem;
}

#search-wrapper .domain-filter input {
    flex-basis: 2rem;
}

/* Page layout */
#search-wrapper {
    width: fit-content;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--verso-background-color, white);
}