/*
  カタログだけが使う指定。カタログの画面そのものはコンポーネントだけで組み、ここには見本の中の細かな配置だけを置く。
*/
@layer layout {
  .catalog-person {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--rx-space-2);
    min-inline-size: 0;
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
  }
  /* Iconの見本の一覧。通常の形と塗りつぶしの形を淡い面のタイルに並べる。 */
  .catalog-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
    gap: var(--rx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    & > li {
      display: grid;
      justify-items: center;
      gap: var(--rx-space-2);
      padding-block: var(--rx-space-4);
      padding-inline: var(--rx-space-2);
      border-radius: var(--rx-radius-field);
      background: var(--rx-background);
      & > .pair {
        display: flex;
        gap: var(--rx-space-3);
        font-size: 1.5rem;
      }
      & > code {
        color: var(--rx-muted);
        font-size: var(--rx-small);
      }
    }
  }
  .catalog-icon-rows {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--rx-body);
    font-weight: 700;
    & > li {
      display: flex;
      align-items: center;
      gap: var(--rx-space-3);
      padding-block: var(--rx-space-3);
      border-block-end: var(--rx-stroke-width) solid
        color-mix(in srgb, var(--rx-ink) 12%, transparent);
      & > .rx-icon {
        font-size: 1.25rem;
        color: var(--rx-link);
      }
    }
  }
  /* PageHeaderの見本を別の文書で見せる枠。 */
  .catalog-preview {
    inline-size: 100%;
    block-size: 20rem;
    border: 0;
  }
  /* 見本の下に添える淡い注記。 */
  .catalog-footnote {
    color: var(--rx-muted);
    font-size: var(--rx-small);
  }
  /* コンポーネントのページの説明とAPI。文中のコード、箇条書き、型の見出し、必須マーク。 */
  .catalog-reference {
    & :where(code) {
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 0.875em;
      overflow-wrap: anywhere;
    }
    & :where(ul) {
      display: grid;
      gap: var(--rx-space-2);
      padding-inline-start: 1.25em;
      list-style: disc;
    }
    & :where(h4) {
      margin: 0;
      font-size: var(--rx-body);
      font-weight: 600;
    }
    & .catalog-required {
      display: block;
      color: var(--rx-danger);
      font-size: var(--rx-small);
      font-weight: 400;
    }
  }
}