/*
 * Docs search trigger (app/views/shared/_search_trigger.html.erb) — the button
 * dressed as a search field: magnifier at the leading edge, muted label, "/" key
 * hint against the trailing edge. Its own file because the trigger is a shared
 * component rendered from four surfaces (docs landing hero, docs page show, the
 * developer-hub landing and an API's hub), not part of any one page's layout.
 *
 * Plain token-consuming CSS, the same pattern as prose.css/editor.css/docs.css, so
 * it tracks the active Ekosystem theme and survives Tailwind purge. The button
 * itself supplies the 1px border and the shape; this only restyles it through the
 * custom properties eko-button exposes, plus one shadow part (see below).
 *
 * `.search-trigger` is the field look; one modifier per placement follows it.
 */
.search-trigger {
  --eko-button-background-color: oklch(var(--eko-t-color-surface));
  /* border-strong is exactly the #C2CBD5 the design calls for. */
  --eko-button-border-color: oklch(var(--eko-t-color-border-strong));
  --eko-button-border-radius: var(--eko-t-border-radius-lg);
  --eko-button-color: oklch(var(--eko-t-color-text-weaker));
  --eko-button-icon-color: oklch(var(--eko-t-color-icon));
  --eko-button-font-size: var(--eko-t-font-size-text-md);
  --eko-button-font-weight: var(--eko-t-font-weight-regular);
  --eko-button-text-align: left;
  --eko-button-padding-x: 14px;
}

/* The button centres its slots as a group and exposes no justify property, so
 * grow the label instead: it takes the free space, which pins the magnifier at
 * the leading edge and pushes the "/" hint to the trailing one. The label then
 * sits left within that space thanks to --eko-button-text-align above. */
.search-trigger::part(content) {
  flex: 1 1 auto;
}

.search-trigger:hover {
  --eko-button-color: oklch(var(--eko-t-color-text));
  --eko-button-icon-color: oklch(var(--eko-t-color-text));
}

/* ── Page-header placement (docs/pages/show, apis/index, apis/show) ───────────
 * The field shares the title row from eko-page-header's "actions" slot. That grid
 * column is min-content, so without an explicit width it collapses onto the label
 * and swallows the gap before the "/" hint. */
.search-trigger--header {
  width: 320px;
  /* Below the header's grid breakpoint the field stacks under the title, where a
   * fixed width could outrun a narrow viewport. */
  max-width: 100%;
}

/* ── Hero placement (docs/pages/index) ───────────────────────────────────────
 * Only the sizing within the hero band belongs here: the field takes the same
 * themed surface/border/text tokens as the header placement above, so it follows
 * the active colour scheme rather than staying pinned to the light palette over
 * the band's fixed dark green.
 *
 * Doubled class deliberately: docs.css caps every hero child at 640px via
 * `.docs-hero__content > *`, which has the same specificity as a single class, so
 * a lone `.search-trigger--hero` would win or lose on import order alone. Two
 * classes settle it here without this file having to know the hero's markup. */
.search-trigger.search-trigger--hero {
  margin-top: 24px;
  max-width: 360px;
  height: 40px;
}