@layer components {
  .rx-suggestion > .note {
    margin-block-start: var(--rx-space-2);
    font-size: var(--rx-label);
    line-height: calc(10 / 7);
    color: var(--rx-muted);

    &:empty {
      display: none;
    }
  }

  /*
    候補の一覧と選んでいる候補の見た目は、Pickerと同じComboboxの共通の指定（field.css）を使う。
    手本はBC2のラベルの候補（screenshots/basecamp2-official/bc2-help-file-labels-02.png、1倍）とジャンプの候補（overlays.md 1f）。
    開閉の操作が使えない時は、他の使えない操作と同じく形をそのままにし、▾だけを使えない操作の灰色にする。
  */
  .rx-suggestion {
    & > .toggle:disabled {
      color: var(--rx-disabled-text);
      cursor: default;
    }
  }

  @media (forced-colors: active) {
    .rx-suggestion > .options > li[data-state="active"] {
      forced-color-adjust: none;
      background: Highlight;
      color: HighlightText;
    }
  }
}