/* dialogとメニュー共通部品 */
/* Shared dialog and menu parts */

body:has(dialog[open]) {
  /* ダイアログ表示時の背景スクロール停止 */
  /* Background scroll lock while dialog is open */
  overflow: hidden;
}

.menu-dialog {
  --menu-interaction-delay: 0s;

  position: fixed;
  /* [open]外のレイアウト指定 */
  /* Layout outside [open] */
  display: grid;
  gap: 16px;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px 24px;
  border: 0;
  background: var(--surface);
  interactivity: inert;
  pointer-events: none;
  transition:
    opacity 0.4s,
    translate 0.4s ease,
    display 0.4s allow-discrete,
    overlay 0.4s allow-discrete,
    interactivity 0s var(--menu-interaction-delay) allow-discrete,
    pointer-events 0s var(--menu-interaction-delay) allow-discrete;
  transition-behavior: allow-discrete;

  &:not([open]):not(:popover-open) {
    display: none;
  }

  &::backdrop {
    background: var(--backdrop);
    opacity: 0;
    transition: opacity 0.4s;
  }

  &[open],
  &:popover-open {
    --menu-interaction-delay: 0.4s;

    interactivity: auto;
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;

    &::backdrop {
      opacity: 1;
    }

    @starting-style {
      interactivity: inert;
      opacity: 0;
      pointer-events: none;

      &::backdrop {
        opacity: 0;
      }
    }
  }
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-list {
  /* リスト側スクロール */
  /* List-owned scrolling */
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  /* スクロール連鎖の内側管理 */
  /* Inner scroll containment */
  overscroll-behavior-y: contain;

  a,
  summary {
    cursor: pointer;
    font-weight: bold;
  }

  > a,
  summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-inline: 16px;
    border-radius: 8px;
    transition: background-color 0.2s;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--bg);
      }
    }
  }
}

.menu-meta {
  margin: 0;
}