@layer components {
  /*
    取り返しのつかない操作の範囲。実測: bc2-help-leave-an-account-01.png (56, 188, 645, 184)。1倍。
    BC2の「Leave this Basecamp account」で、取り消せない操作の確認（「Are you sure you want to permanently remove yourself…」）を
    囲む箱。
    - 塗り #ffffe0、四方に1px #ebdabe、角丸約3px（角の画素 (57〜60, 188〜191) が丸い）、影なし。
    - 内側の余白は約16px（文字の左端まで15px、問いの文の上端まで19px、ボタンの下端から下の枠まで21px）。
    - 問いの文は黒の太字（約15px）。その下に入力欄と、控えめなボタン「Yes, remove me from this account」と「or No, I want to stay!」のリンク。
    Retrixの題名は、カードの中の見出しと同じ本文の大きさ（13px）の黒い太字にする。説明は抜粋と同じ灰色。
    操作は危険の色で塗ったButtonを利用側が渡し、ほかの設定と見分ける。
    本文がなく幅もある時は、題名と説明の末尾側に操作を置き、狭い時や本文がある時は下の段へ回す。
  */
  .rx-danger-zone {
    --rx-danger-zone-face: #ffffe0;
    --rx-danger-zone-edge: #ebdabe;
    /* 題名・本文・操作を内容幅で並べ、入らない時に次の段へ折り返すためFlex。 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 段の間は、上下の余白よりはっきり狭くする。 */
    gap: var(--rx-space-3) var(--rx-space-6);
    min-inline-size: 0;
    padding-block: var(--rx-space-4);
    padding-inline: var(--rx-space-4);
    border: var(--rx-stroke-width) solid var(--rx-danger-zone-edge);
    border-radius: var(--rx-radius-surface);
    background: var(--rx-danger-zone-face);
    color: var(--rx-text);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    overflow-wrap: anywhere;
  }

  .rx-danger-zone > .heading {
    flex: 1 1 18rem;
    display: grid;
    gap: var(--rx-space-1);
    min-inline-size: 0;
    & > h2 {
      margin: 0;
      color: var(--rx-ink);
      font-size: var(--rx-body);
      font-weight: 700;
      line-height: var(--rx-control-leading);
    }
    & > p {
      margin: 0;
      color: var(--rx-muted);
    }
  }

  .rx-danger-zone > .body {
    flex: 1 1 100%;
    display: grid;
    gap: var(--rx-space-2);
    min-inline-size: 0;
    & > * {
      margin: 0;
    }
    &:empty {
      display: none;
    }
  }

  .rx-danger-zone > .actions {
    flex: 0 1 auto;
    /* 操作を内容幅で並べ、コンポーネントの幅に合わせて折り返すためFlex。 */
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--rx-space-2);
    min-inline-size: 0;
    & > * {
      min-inline-size: 0;
      max-inline-size: 100%;
    }
    &:empty {
      display: none;
    }
  }

  @media (forced-colors: active) {
    .rx-danger-zone {
      border-color: CanvasText;
      background: Canvas;
    }
  }
}