/*
 * The company search, in the navbar (shared/_search) and in the watchlist's
 * "watch company" panel (watchlists/_add_company): a field whose label stands
 * in for a placeholder, and a results list that drops below it.
 *
 * The list's items are links (navbar) or buttons (watchlist); the `search`
 * controller moves `aria-selected` between them, and that attribute is the
 * highlight.
 */
@layer components {
  .search-field {
    position: relative;
  }

  .search-field__input {
    display: block;
    inline-size: 100%;
    block-size: 2.5rem;
    padding-inline: var(--space-sm);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-raised);
    font-size: var(--text-input);
    appearance: none;

    &:hover {
      border-color: var(--color-rule-strong);
    }

    &:focus {
      border-color: var(--color-accent);
      background-color: var(--color-surface);
    }
  }

  /* On a white panel the field needs its control boundary to be seen. */
  .search-field--on-surface .search-field__input {
    border-color: var(--color-rule-control);
    background-color: var(--color-surface);
  }

  .search-field__label {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--space-sm);
    translate: 0 -50%;
    overflow: hidden;
    max-inline-size: calc(100% - var(--space-xl));
    color: var(--color-ink-subtle);
    font-size: var(--text-input);
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;

    .search-field__input:is(:focus, :not(:placeholder-shown)) + & {
      visibility: hidden;
    }
  }

  .search-results {
    position: absolute;
    z-index: 50;
    inline-size: 100%;
    max-block-size: 65vh;
    overflow-y: auto;
    margin-block-start: var(--space-2xs);
    padding: var(--space-2xs);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-overlay);
  }

  .search-results__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    font-size: var(--text-ui);
    text-align: start;
    text-decoration: none;
    cursor: pointer;

    &[aria-selected="true"] {
      background-color: var(--color-row-hover);
    }
  }

  .search-results__ticker {
    flex: none;
    inline-size: 4.5rem;
    color: var(--color-ink-muted);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.03em;
  }

  .search-results__name {
    flex: 1;
    min-inline-size: 0;
  }
}