@layer components {
  /*
    結果の通知は、画面の右下（末尾側の下）に浮かべる黄色の箱。
    実測: overlays.md「4a. 黄色の案内の箱（BC2）」。塗り#ffffcc、1px #eac73bの枠で下だけ3px、角丸4px、黒い約13pxの字で、
    1行目は太字。Highriseの保存後の通知（4c）も同じ#ffffccの黄色。4aは影を持たないので、浮かべても影は付けない。
    成功は黄色の箱のまま、アイコンを緑にする。注意と失敗は手本に無い（推測）。面をそれぞれの役割の淡い色にし、
    枠とアイコンを役割の色にして見分ける。
    文と操作は一行に並べ、入らなければ文を先に折り返して操作を末尾側へ送る。
    角の閉じる操作が入る分だけ、末尾側を空ける。
  */
  .rx-toast {
    --rx-toast-fill: var(--rx-mark);
    --rx-toast-edge: #eac73b;
    --rx-toast-accent: var(--rx-ink);
    --rx-overlay-heading-start: var(--rx-space-3);
    position: fixed;
    inset-block-start: auto;
    inset-block-end: max(var(--rx-space-4), env(safe-area-inset-bottom));
    inset-inline: var(--rx-space-4);
    inline-size: fit-content;
    max-inline-size: min(32rem, calc(100% - 2 * var(--rx-space-4)));
    max-block-size: calc(100dvh - 2 * var(--rx-space-4));
    /* 角の閉じる操作をはみ出させるため、パネルは切り取らない。 */
    overflow: visible;
    margin: 0;
    margin-inline-start: auto;
    padding-block: var(--rx-space-3);
    padding-inline: var(--rx-space-4)
      calc(var(--rx-overlay-close-size) + var(--rx-overlay-close-inset) + var(--rx-space-1));
    border: var(--rx-stroke-width) solid var(--rx-toast-edge);
    border-block-end-width: 0.1875rem;
    border-radius: 0.25rem;
    background: var(--rx-toast-fill);
    color: var(--rx-text);
    box-shadow: none;
    /* 日本語は文節の切れ目で折り返し、行末に一、二文字だけを残さない。 */
    word-break: auto-phrase;
    &[data-tone="success"] {
      --rx-toast-accent: var(--rx-success);
    }
    &[data-tone="warning"] {
      /* 注意の淡い色（--rx-warning-soft）だけでは黄色の面と見分けにくいため、琥珀色を少し混ぜる。 */
      --rx-toast-fill: color-mix(in srgb, var(--rx-warning) 12%, var(--rx-warning-soft));
      --rx-toast-edge: color-mix(in srgb, var(--rx-warning) 55%, var(--rx-surface));
      --rx-toast-accent: var(--rx-warning);
    }
    &[data-tone="danger"] {
      --rx-toast-fill: var(--rx-danger-soft);
      --rx-toast-edge: color-mix(in srgb, var(--rx-danger) 45%, var(--rx-surface));
      --rx-toast-accent: var(--rx-danger);
    }
    &:popover-open {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--rx-space-2) var(--rx-space-4);
    }
  }
  /* Overlayの見出し・操作の行の余白は、パネルの余白に置き換える。 */
  .rx-toast.rx-overlay:has(> .heading) > :is(.heading, .actions) {
    padding: 0;
  }
  .rx-toast > .heading {
    flex: 1 1 12rem;
    & > .heading-row {
      padding-inline-end: 0;
      & > .message {
        display: flex;
        align-items: start;
        /* アイコンと文は一つの塊として読ませるので、段の間より詰める。Noticeのピルと同じ間隔。 */
        gap: 0.375rem;
        /* 4aの1行目と同じ太字。 */
        font-weight: 600;
        & > .rx-icon {
          flex: none;
          color: var(--rx-toast-accent);
          inline-size: 1.125em;
          block-size: 1.125em;
          margin-block-start: calc((1lh - 1.125em) / 2);
        }
      }
    }
  }
  .rx-toast > .actions {
    flex: none;
    margin-inline-start: auto;
  }
  @media (forced-colors: active) {
    .rx-toast {
      background: Canvas;
      color: CanvasText;
      outline: var(--rx-stroke-width) solid CanvasText;
    }
  }
}