@layer components {
  /*
    閉じる操作の寸法。Tableの選択バーは、角から--rx-overlay-close-offsetだけはみ出させて置く。
    浮かぶパネル（.rx-overlay）は、角の内側に--rx-overlay-close-insetだけ入れて置く。
  */
  :is(.rx-overlay, .rx-table > .selection-bar) {
    --rx-overlay-close-size: 1.75rem;
    --rx-overlay-close-offset: 0.25rem;
  }
  /*
    閉じる操作は、末尾側の上の角の内側に置く小さな×。枠も塗りも持たず、灰色の×だけを見せる（BC2のポップオーバーには×が無い。推測）。
    見出しの行は、×が余白より内側へ入る分だけ行末を空ける。
  */
  .rx-overlay {
    --rx-overlay-title-line: calc(var(--rx-label) * 10 / 7);
    /*
      余白の決め方。パネルの内側は上下左右とも同じ（inset）。中の塊の間は、見出しと本文の間（heading-gap）と、
      本文と操作の行の間（actions-gap）だけで作り、一番下の塊の下には内側の余白を一度だけ取る。
    */
    --rx-overlay-inset-inline: 1.25rem;
    --rx-overlay-inset-block: var(--rx-overlay-inset-inline);
    --rx-overlay-heading-gap: var(--rx-space-3);
    --rx-overlay-actions-gap: var(--rx-space-4);
    --rx-overlay-close-inset: 0.375rem;
    /* 見出しの上の余白。×は題名の一行目の上下の中央にそろえる。 */
    --rx-overlay-heading-start: var(--rx-overlay-inset-block);
    border: var(--rx-stroke-width) solid var(--rx-popover-edge);
    border-radius: var(--rx-popover-radius);
    background: var(--rx-surface);
    color: var(--rx-text);
    font-family: var(--rx-control-font-family);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    box-shadow: var(--rx-popover-shadow);
    overflow-wrap: anywhere;
    & > .heading {
      display: grid;
      gap: var(--rx-space-1);
      min-inline-size: 0;
      padding-block: var(--rx-overlay-heading-start) 0;
      padding-inline: var(--rx-overlay-inset-inline);
      & > .heading-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        min-inline-size: 0;
        /* 角に置いた操作が余白より内側へ入る分だけ、題名の行末を空ける。 */
        padding-inline-end: max(
          0rem,
          calc(
            var(--rx-overlay-close-size) + var(--rx-overlay-close-inset) -
              var(--rx-overlay-inset-inline)
          )
        );
        & > :is(h2, h3, strong, .message) {
          display: block;
          min-inline-size: 0;
        }
        /* 見出しは黒の太字（1a「Assign this to-do to:」）。 */
        & > :is(h2, h3, strong) {
          font-size: var(--rx-label);
          font-weight: 600;
          line-height: var(--rx-overlay-title-line);
        }
      }
      & > p {
        color: var(--rx-muted);
      }
    }
    & > .body {
      display: grid;
      align-content: start;
      /* 本文の段の間は12px。見出しと本文の間（heading-gap）と同じか狭くし、段の中の間はさらに狭くする。 */
      gap: var(--rx-space-3);
      min-inline-size: 0;
      padding-block: var(--rx-overlay-heading-gap) var(--rx-overlay-inset-block);
      padding-inline: var(--rx-overlay-inset-inline);
      overflow-wrap: anywhere;
      &:empty {
        display: none;
      }
      &:first-child {
        padding-block-start: var(--rx-overlay-inset-block);
      }
      /* 続く操作の行が間を持つので、本文の下には余白を取らない。 */
      &:has(~ .actions) {
        padding-block-end: 0;
      }
    }
    /*
      題名を読み上げだけにした（見える見出しが無い）パネルは、見出しの余白を取らず、本文をパネルの上の余白から始める。
      角の×と本文の一行目が重ならないよう、本文の行末を×の分だけ空ける。
    */
    & > .heading:not(:has(> p)):has(> .heading-row > .rx-visually-hidden:first-child) {
      padding-block-start: 0;
      & + .body {
        padding-block-start: var(--rx-overlay-inset-block);
        padding-inline-end: calc(
          var(--rx-overlay-close-size) + var(--rx-overlay-close-inset) + var(--rx-space-2)
        );
      }
    }
    /* 見出しだけのパネルは、見出しの下に内側の余白を取る。 */
    &:not(:has(> .body:not(:empty), > .actions)) > .heading {
      padding-block-end: var(--rx-overlay-inset-block);
    }
    & > .actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: end;
      gap: var(--rx-space-2);
      min-inline-size: 0;
      padding-block: var(--rx-overlay-actions-gap) var(--rx-overlay-inset-block);
      padding-inline: var(--rx-overlay-inset-inline);
    }
  }
  /* 閉じる操作の位置。Dialog・Popover・Toast・Tableの選択バーで同じ角に置く。 */
  :is(.rx-overlay > .heading > .heading-row, .rx-table > .selection-bar > .heading) > .close {
    position: absolute;
    inset-block-start: calc(-1 * var(--rx-overlay-close-offset));
    inset-inline-end: calc(-1 * var(--rx-overlay-close-offset));
    z-index: 1;
    display: flex;
    & > .rx-button {
      --rx-button-size: var(--rx-overlay-close-size);
    }
  }
  .rx-overlay > .heading > .heading-row > .close {
    inset-inline-end: var(--rx-overlay-close-inset);
    inset-block-start: calc(
      var(--rx-overlay-heading-start) +
        (var(--rx-overlay-title-line) - var(--rx-overlay-close-size)) / 2
    );
  }
  /* パネルと選択バーの×は塗らない。ホバーすると淡い面を敷き、×を濃くする。 */
  :is(.rx-overlay > .heading > .heading-row, .rx-table > .selection-bar > .heading)
    > .close
    > .rx-button {
    border-color: transparent;
    background: transparent;
    color: var(--rx-muted);
    box-shadow: none;
    &:hover:not(:disabled) {
      border-color: transparent;
      background: color-mix(in srgb, var(--rx-ink) 6%, transparent);
      color: var(--rx-ink);
      box-shadow: none;
    }
    &:active:not(:disabled) {
      background: color-mix(in srgb, var(--rx-ink) 10%, transparent);
      box-shadow: none;
    }
  }
  /* 閉じている浮かぶ要素は見せない。開閉は動かさず、その場で切り替える。 */
  :is(
      .rx-overlay,
      .rx-menu,
      .rx-command-menu > .panel,
      .rx-date-picker > .panel,
      .rx-table > .selection-bar
    ):is([popover], dialog):is([popover]:not(:popover-open), dialog:not([open])) {
    opacity: 0;
  }
  .rx-overlay[data-placement="anchor"] {
    --rx-overlay-anchor: auto;
    --rx-overlay-width: 20rem;
    position: fixed;
    position-anchor: var(--rx-overlay-anchor);
    inset-block: auto;
    inset-inline: auto;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    inline-size: min(var(--rx-overlay-width), calc(100vw - 1rem));
    max-inline-size: calc(100vw - 1rem);
    max-block-size: calc(100dvh - 1rem);
    /* 角の操作をはみ出させるため、パネルは切り取らず本文だけをスクロールする。 */
    overflow: visible;
    margin: 0;
    padding: 0;
    &[data-size="compact"] {
      --rx-overlay-width: 16rem;
    }
    &[data-size="wide"] {
      --rx-overlay-width: 28rem;
    }
    &:popover-open {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
    }
    & > .body {
      min-block-size: 0;
      overflow: auto;
      overscroll-behavior: contain;
    }
    & > .actions {
      grid-row: 3;
    }
  }
  @supports (inset-block-start: anchor(end)) and (position-try-fallbacks: flip-block) {
    .rx-overlay[data-placement="anchor"] {
      translate: none;
      inset-block-start: calc(anchor(end) + var(--rx-space-1));
      inset-inline-start: anchor(start);
      position-try-fallbacks:
        flip-block,
        flip-inline,
        flip-block flip-inline,
        --rx-overlay-fit,
        --rx-overlay-fit flip-block;
      &[data-align="end"] {
        inset-inline-start: auto;
        inset-inline-end: anchor(end);
      }
    }
    @position-try --rx-overlay-fit {
      inset-inline-start: 0.5rem;
      inset-inline-end: auto;
    }
  }
  @media (forced-colors: active) {
    .rx-overlay {
      background: Canvas;
      box-shadow: none;
    }
  }
  @media (pointer: coarse) {
    :is(.rx-overlay, .rx-table > .selection-bar) {
      --rx-overlay-close-size: 2.75rem;
    }
  }
  @media (forced-colors: active) {
    :is(.rx-overlay > .heading > .heading-row, .rx-table > .selection-bar > .heading)
      > .close
      > .rx-button {
      border-color: ButtonText;
    }
  }
}