@layer components {
  /*
    絵文字パネル。手本に同じ部品は無い（推測）。BC2のジャンプの候補（実測: overlays.md「1f」。
    screenshots/basecamp2-official/bc2-help-searching-in-07.png (42, 25, 320, 146)。1倍）の語彙で組む。
    上に検索欄（InputGroup）、下に種類の見出しと絵文字のグリッドを並べる。種類の見出しは、1fの分類名（「People」。#888の太字、約12px）
    と同じ灰色の太字にする（#888は白地で4.5:1に届かないので--rx-muted）。
    絵文字は枠も影もない平らなセルに置き、ホバーすると1fの選んだ候補と同じ角の無い淡い青（--rx-option-active、#ddeefe）の面、
    押すと内側へへこむ（押した時は手本に無い。推測）。
    格子はセルの大きさを保って入る数だけ並べ、狭い場所では列を減らす。文字の指定はこのファイルが持つ（専用の操作）。
  */
  .rx-emoji-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rx-space-2);
    min-inline-size: 0;
    /* セルの最小32pxで8列が入る幅までにし、既定の種類（8個・12個）が行の途中で切れないようにする。 */
    inline-size: min(100%, 17rem);
    & > .groups {
      display: grid;
      gap: var(--rx-space-2);
      max-block-size: 15rem;
      min-inline-size: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      & > .group {
        min-inline-size: 0;
        &[hidden] {
          display: none;
        }
        & > .title {
          margin: 0;
          padding-block: var(--rx-space-1);
          padding-inline: var(--rx-space-1);
          color: var(--rx-muted);
          font-size: var(--rx-label);
          font-weight: 600;
          line-height: var(--rx-label-leading);
        }
        & > .grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
          min-inline-size: 0;
          & > .emoji {
            appearance: none;
            display: grid;
            place-items: center;
            aspect-ratio: 1;
            min-inline-size: 0;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--rx-text);
            font-family: inherit;
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 1;
            cursor: pointer;
            &[hidden] {
              display: none;
            }
            &:hover {
              background: var(--rx-option-active);
            }
            &:active {
              background: color-mix(
                in srgb,
                var(--rx-option-active) 85%,
                var(--rx-option-active-text)
              );
              box-shadow: var(--rx-shadow-control-pressed);
            }
            &:focus-visible {
              outline: 0.125rem solid var(--rx-link);
              outline-offset: -0.125rem;
            }
          }
        }
      }
      & > .empty {
        margin: 0;
        padding-block: var(--rx-space-4);
        padding-inline: var(--rx-space-2);
        color: var(--rx-muted);
        font-size: var(--rx-label);
        line-height: var(--rx-label-leading);
        text-align: center;
      }
    }
  }
  @media (forced-colors: active) {
    .rx-emoji-picker > .groups > .group > .grid > .emoji:hover {
      outline: var(--rx-stroke-width) solid Highlight;
    }
  }
}