, because a inside a paragraph would be invalid HTML and
would rule out embedding the bar mid-sentence. */
display: block;
position: absolute;
/* Above a sticky site header, which is the thing a dropdown most often
has to clear — and high enough by default that a site does not discover
the problem only once results are overlapping its chrome. Raise it with
the property rather than by writing a rule. */
z-index: var(--rookery-search-z, 1000);
/* WIDER THAN THE INPUT, and sized to its content. A row is a title with
its bracketed id trailing after it, and an input sized for typing into
is not wide enough to hold both: at the input's width even a short title
wraps against its own id. So the panel takes the width of its longest
row and no more.
`max-content` is right BECAUSE the row flows left. While the id was
pinned to the right-hand edge, a content-sized panel meant every row's
id hung off the end of the longest one, with a ragged trench of empty
space between each title and its own id — so the width had to be fixed
to keep that gap honest. Now that the id sits directly after the title, the only
thing width controls is how much empty margin trails the longest row,
and hugging the content is simply the tighter answer.
`min-width` keeps it from ever being narrower than the input it hangs
from, and the `min()` in `max-width` is a floor under the property
rather than a second knob: whatever cap a site asks for, the panel still
cannot grow past the viewport it has to fit inside. Without that, a cap
generous enough for a desktop header spills off the side of a phone.
Anchored at the LEFT edge of the input, so it extends rightward. A bar
sitting at the right-hand end of a header wants the opposite — set
`left: auto; right: 0` in your own stylesheet, which is what this
package's own docs site does. */
left: 0;
right: auto;
width: max-content;
min-width: 100%;
max-width: min(var(--rookery-search-max-width, 28em), calc(100vw - 2rem));
color: var(--rookery-search-fg, inherit);
background-color: var(--rookery-search-bg, white);
border: 1px solid
var(--rookery-search-border, var(--idea-border-color, var(--idea-link-color, rgba(0, 0, 0, 0.25))));
border-radius: var(--rookery-search-radius, 4px);
max-height: var(--rookery-search-max-height, 20em);
overflow-y: auto;
}
/* Visibility is driven off the wrapper's state attribute, which the script
owns, rather than a class it toggles — one source of truth for "open". */
.rookery-search[data-rookery-search-open="false"] .rookery-search-results {
display: none;
}
/* A row reads the way a note reads inline: its title, then its bracketed id
trailing after it. Plain inline flow rather than a flex row with the id
pushed to the far edge — spacing the two apart made them look like two
columns of a table, which is a claim that the id is a separate FIELD
rather than the note's own name for itself. Left-aligned and adjacent,
they read as one label.
Undecorated, because the title is not a link inside a row; the whole row
is. Note that a site whose own `a { text-decoration: underline }` sits
outside a cascade layer will beat this — layered loses to unlayered — so
an underline here is the site's to turn off, in the site's stylesheet. */
.rookery-search-row {
display: block;
padding: 0.25em 0.5em;
color: inherit;
text-decoration: none;
}
/* Focus as well as hover: the dropdown is keyboard-reachable, and a row a
reader has tabbed to must look the same as one they are pointing at. */
.rookery-search-row:hover,
.rookery-search-row:focus {
background-color: var(
--rookery-search-hover,
var(--idea-link-color, rgba(128, 0, 255, 0.12))
);
}
/* Same size as the title it follows, deliberately unlike `.idea-label`
inline, which is set small so an id does not compete with the heading it
sits beside. Here there is no heading to compete with — a result is one
line of small text already, and shrinking half of it again just makes the
id hard to read. Colour still separates the two.
`nowrap` so a bracketed id never breaks across lines; a long title wraps
and the id follows it, exactly as it would in prose. */
.rookery-search-id {
color: var(--rookery-search-id-color, var(--idea-id-color, gray));
margin-left: 0.4em;
white-space: nowrap;
}
}