@layer components {
  /* A picker in a referential: a search field, matches loaded in a frame, one chosen. */
  .picker {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;

    & input[type="search"] { width: 100%; }
  }


  /* The matches, in the flow under the field: never clipped by a block. */
  .picker__results {
    display: block;
    margin-top: 4px;
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius);
    background: var(--color-surface);

    &[hidden], &:empty { display: none; }
  }

  .picker__option {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.5rem 0.875rem;
    border: 0;
    border-bottom: 1px solid var(--color-line);
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;

    &:last-child { border-bottom: 0; }
    &:hover, &:focus-visible { background: var(--color-zebra); outline: none; }
    & small { color: var(--color-ink-muted); font-size: var(--text-sm); }
  }

  .picker__empty { padding: 0.5rem 0.875rem; color: var(--color-ink-muted); font-size: var(--text-sm); }

  .picker__chosen { font-weight: 600; }
  .picker__chosen--none { font-weight: 400; font-style: italic; color: var(--color-ink-muted); }
}