@layer components {
  /*
    まだ何もない場所。実測: overlays.md「4f. 空の状態の案内」のHighrise 2007（Contactsの空の一覧）。
    一覧の場所に黄色の帯（#feffcd 前後 ≒ #ffffcc）を細い枠で敷き、中央に大きな太字の題名「Build your contacts: Add a person」と、
    その下に小さな黒い説明を書く。角は四角。
    実測: highrise/highrise-contacts-empty-state-2007-genbeta.webp (13, 82, 270, 28)。縮小したJPEG相当の画像なので概略。
    帯の塗り #feffcd 前後、上の縁 #e9ead6（黄色みのある淡い灰色）。題名の大きさと余白は推測。
    BC2には空の状態の部品が見つからなかった。
    アイコンを渡した時だけ、場面の色（検索で0件は灰、初回は青緑、完了時は緑）の小さな丸に置く（推測）。操作は文の下に置く。
  */
  .rx-empty-state {
    --rx-empty-color: var(--rx-muted);
    --rx-empty-edge: #e9ead6;
    display: grid;
    justify-items: center;
    gap: var(--rx-space-3);
    min-inline-size: 0;
    inline-size: 100%;
    padding-block: var(--rx-space-4);
    padding-inline: var(--rx-space-4);
    border: var(--rx-stroke-width) solid var(--rx-empty-edge);
    background: var(--rx-mark);
    color: var(--rx-text);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    text-align: center;
    overflow-wrap: anywhere;
    /* 日本語は文節の切れ目で折り返し、中央に揃えた行の端に一、二文字だけを残さない。 */
    word-break: auto-phrase;
    &[data-kind="start"] {
      --rx-empty-color: var(--rx-link);
    }
    &[data-kind="complete"] {
      --rx-empty-color: var(--rx-success);
    }
    /* 文のまとまり。読みやすい幅に収める。 */
    & > .slip {
      display: grid;
      justify-items: center;
      min-inline-size: 0;
      max-inline-size: min(100%, 28rem);
      & > .symbol {
        display: grid;
        place-items: center;
        inline-size: 2rem;
        block-size: 2rem;
        border-radius: 50%;
        color: var(--rx-surface);
        font-size: 1rem;
      }
      & > .symbol + .title {
        margin-block-start: var(--rx-space-3);
      }
      & > .title {
        margin: 0;
        color: var(--rx-text);
        font-size: var(--rx-section-title);
        font-weight: 700;
        line-height: 1.3;
        text-wrap: balance;
      }
      & > .body {
        min-inline-size: 0;
        margin-block-start: var(--rx-space-1);
        color: var(--rx-text);
        text-wrap: balance;
        & > * + * {
          margin-block-start: var(--rx-space-1);
        }
        &:empty {
          display: none;
        }
      }
    }
    & > .actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--rx-space-2);
    }
    /* 渡されたアイコンは、場面の色で塗った丸の上に白で置く。完了時は完了の色で塗る。 */
    &:not([data-kind="complete"]) > .slip > .symbol {
      background: var(--rx-empty-color);
    }
    &[data-kind="complete"] > .slip > .symbol {
      background: var(--rx-fill-success);
    }
  }
  @media (forced-colors: active) {
    .rx-empty-state {
      border-color: CanvasText;
      background: Canvas;
    }
    .rx-empty-state > .slip > .symbol {
      outline: var(--rx-stroke-width) solid CanvasText;
    }
  }
}