Modal 03

<div class="modal-basic js-modal-basic">
  <button class="modal-basic__open js-modal-basic-open" type="button">
    モーダルを開く
  </button>

  <dialog
    class="modal-basic__dialog js-modal-basic-dialog"
    aria-label="モーダルタイトル"
  >
    <div class="modal-basic__header">
      <h3 class="modal-basic__title">モーダルタイトル</h3>
      <button
        class="modal-basic__close js-modal-basic-close"
        type="button"
        aria-label="モーダルを閉じる"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          aria-hidden="true"
        >
          <path
            d="M5 5l12 12M17 5L5 17"
            stroke="currentColor"
            stroke-width="1.8"
          />
        </svg>
      </button>
    </div>

    <p class="modal-basic__text">
      ここに説明テキストが入ります。ここに説明テキストが入ります。ここに説明テキストが入ります。
    </p>

    <div class="modal-basic__footer">
      <button
        class="modal-basic__button modal-basic__button--secondary js-modal-basic-close"
        type="button"
      >
        キャンセル
      </button>
      <button
        class="modal-basic__button modal-basic__button--primary js-modal-basic-close"
        type="button"
      >
        OK
      </button>
    </div>
  </dialog>
</div>

/* reset */
:where(h3).modal-basic__title,
:where(p).modal-basic__text {
  margin: 0;
  font: inherit;
}

:where(button).modal-basic__open,
:where(button).modal-basic__close,
:where(button).modal-basic__button {
  box-sizing: border-box;
  padding: 0;
  font: inherit;
  vertical-align: middle;
  color: inherit;
  text-align: inherit;
  appearance: none;
  cursor: pointer;
  background: none;
  border: none;
}

:where(dialog).modal-basic__dialog {
  box-sizing: border-box;
  padding: 0;
  border: none;
}

/* snippet */
.modal-basic {
  --modal-background: #fff;
  --modal-title-color: #364153;
  --modal-text-color: #5e6775;
  --modal-close-color: #364153;
  --modal-interactive-background: #f5f5f5;
  --modal-button-primary-background: #2b36f5;
  --modal-button-primary-background-hover: #1f28a8;
  --modal-button-primary-color: #fff;
  --modal-button-secondary-border: #d1d5dc;
  --modal-button-secondary-color: #364153;
  --modal-backdrop: rgb(0 0 0 / 50%);
  --modal-focus-color: var(--modal-button-primary-background);
  --modal-duration: 0.3s;
}

.modal-basic__open {
  display: inline-grid;
  place-items: center;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--modal-button-primary-color);
  background-color: var(--modal-button-primary-background);
  border-radius: calc(infinity * 1px);

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-button-primary-background-hover);
    }
  }
}

.modal-basic__dialog {
  --modal-dialog-viewport-gap: 24px;
  --modal-dialog-viewport-margin: calc(var(--modal-dialog-viewport-gap) * 2);

  width: calc(100% - var(--modal-dialog-viewport-margin));
  max-width: 480px;
  max-height: calc(100dvh - var(--modal-dialog-viewport-margin));
  padding: 24px;
  margin: auto;
  overflow-y: auto;
  background-color: var(--modal-background);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--modal-duration),
    transform var(--modal-duration);
}

.modal-basic__dialog--visible {
  opacity: 1;
  transform: translateY(0);
}

.modal-basic__dialog::backdrop {
  background-color: var(--modal-backdrop);
  opacity: 0;
  transition: opacity var(--modal-duration);
}

.modal-basic__dialog--visible::backdrop {
  opacity: 1;
}

.modal-basic__header {
  display: flex;
  column-gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.modal-basic__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--modal-title-color);
}

.modal-basic__close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-block: -8px;
  margin-inline: auto -8px;
  color: var(--modal-close-color);
  border-radius: 8px;

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-interactive-background);
    }
  }
}

.modal-basic__text {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--modal-text-color);
}

.modal-basic__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.modal-basic__button {
  display: inline-grid;
  place-items: center;
  min-width: 120px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: calc(infinity * 1px);
}

.modal-basic__button--primary {
  color: var(--modal-button-primary-color);
  background-color: var(--modal-button-primary-background);

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-button-primary-background-hover);
    }
  }
}

.modal-basic__button--secondary {
  color: var(--modal-button-secondary-color);
  border: 1px solid var(--modal-button-secondary-border);

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-interactive-background);
    }
  }
}

/* focus */
.modal-basic__open,
.modal-basic__close,
.modal-basic__button {
  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--modal-focus-color);
    outline-offset: 2px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal-basic__open,
  .modal-basic__close,
  .modal-basic__button,
  .modal-basic__dialog,
  .modal-basic__dialog::backdrop {
    transition: none;
  }
}

(function () {
  const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
  let instanceIndex = 0;

  document.querySelectorAll(".js-modal-basic").forEach((root) => {
    const openButton = root.querySelector(".js-modal-basic-open");
    const dialog = root.querySelector(".js-modal-basic-dialog");
    if (!openButton || !dialog) return;

    instanceIndex += 1;
    const title = root.querySelector(".modal-basic__title");
    if (title) {
      const titleId = `modal-basic-title-${instanceIndex}`;
      title.id = titleId;
      dialog.setAttribute("aria-labelledby", titleId);
    }

    const visibleClass = "modal-basic__dialog--visible";
    let isClosing = false;
    let openRafId = 0;
    let closeTransitionHandler = null;
    let closeFallbackTimer = 0;

    function getCloseTransitionMs() {
      const duration = getComputedStyle(root)
        .getPropertyValue("--modal-duration")
        .trim();
      if (!duration) return 0;
      const ms = duration.endsWith("ms")
        ? parseFloat(duration)
        : parseFloat(duration) * 1000;
      return Number.isFinite(ms) ? ms : 0;
    }

    function cleanupCloseTransition() {
      if (closeTransitionHandler) {
        dialog.removeEventListener("transitionend", closeTransitionHandler);
        closeTransitionHandler = null;
      }
      if (closeFallbackTimer) {
        clearTimeout(closeFallbackTimer);
        closeFallbackTimer = 0;
      }
    }

    function finishClose() {
      if (!isClosing) return;

      cleanupCloseTransition();
      dialog.classList.remove(visibleClass);

      if (dialog.open) {
        dialog.close();
      }

      isClosing = false;
    }

    function openDialog() {
      if (dialog.open && !isClosing) return;

      if (isClosing) {
        cleanupCloseTransition();
        isClosing = false;
        dialog.classList.add(visibleClass);
        return;
      }

      dialog.showModal();
      openRafId = requestAnimationFrame(() => {
        openRafId = 0;
        if (!dialog.open || isClosing) return;
        dialog.classList.add(visibleClass);
      });
    }

    function closeDialog() {
      if (!dialog.open) {
        cleanupCloseTransition();
        isClosing = false;
        return;
      }

      if (isClosing) return;

      cleanupCloseTransition();

      if (openRafId) {
        cancelAnimationFrame(openRafId);
        openRafId = 0;
        dialog.classList.remove(visibleClass);
        dialog.close();
        return;
      }

      const hasVisibleClass = dialog.classList.contains(visibleClass);

      if (reducedMotion.matches || !hasVisibleClass) {
        dialog.classList.remove(visibleClass);
        dialog.close();
        return;
      }

      isClosing = true;
      dialog.classList.remove(visibleClass);

      closeTransitionHandler = (event) => {
        if (event.target !== dialog) return;
        finishClose();
      };

      dialog.addEventListener("transitionend", closeTransitionHandler);
      closeFallbackTimer = window.setTimeout(
        finishClose,
        getCloseTransitionMs() + 50,
      );
    }

    openButton.addEventListener("click", openDialog);

    dialog.querySelectorAll(".js-modal-basic-close").forEach((button) => {
      button.addEventListener("click", closeDialog);
    });

    dialog.addEventListener("cancel", (event) => {
      event.preventDefault();
      closeDialog();
    });

    // ダイアログ本体の外側(バックドロップ)クリックで閉じる
    dialog.addEventListener("click", (event) => {
      if (event.target !== dialog) return;
      const rect = dialog.getBoundingClientRect();
      const inDialog =
        rect.top <= event.clientY &&
        event.clientY <= rect.bottom &&
        rect.left <= event.clientX &&
        event.clientX <= rect.right;
      if (!inDialog) {
        closeDialog();
      }
    });
  });
})();

<div class="modal-basic-no-title js-modal-basic-no-title">
  <button
    class="modal-basic-no-title__open js-modal-basic-no-title-open"
    type="button"
  >
    モーダルを開く
  </button>

  <dialog
    class="modal-basic-no-title__dialog js-modal-basic-no-title-dialog"
    aria-label="モーダルダイアログ"
  >
    <div class="modal-basic-no-title__header">
      <button
        class="modal-basic-no-title__close js-modal-basic-no-title-close"
        type="button"
        aria-label="モーダルを閉じる"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          aria-hidden="true"
        >
          <path
            d="M5 5l12 12M17 5L5 17"
            stroke="currentColor"
            stroke-width="1.8"
          />
        </svg>
      </button>
    </div>

    <p class="modal-basic-no-title__text">
      ここに説明テキストが入ります。ここに説明テキストが入ります。ここに説明テキストが入ります。
    </p>

    <div class="modal-basic-no-title__footer">
      <button
        class="modal-basic-no-title__button modal-basic-no-title__button--secondary js-modal-basic-no-title-close"
        type="button"
      >
        キャンセル
      </button>
      <button
        class="modal-basic-no-title__button modal-basic-no-title__button--primary js-modal-basic-no-title-close"
        type="button"
      >
        OK
      </button>
    </div>
  </dialog>
</div>

/* reset */
:where(p).modal-basic-no-title__text {
  margin: 0;
  font: inherit;
}

:where(button).modal-basic-no-title__open,
:where(button).modal-basic-no-title__close,
:where(button).modal-basic-no-title__button {
  box-sizing: border-box;
  padding: 0;
  font: inherit;
  vertical-align: middle;
  color: inherit;
  text-align: inherit;
  appearance: none;
  cursor: pointer;
  background: none;
  border: none;
}

:where(dialog).modal-basic-no-title__dialog {
  box-sizing: border-box;
  padding: 0;
  border: none;
}

/* snippet */
.modal-basic-no-title {
  --modal-background: #fff;
  --modal-text-color: #5e6775;
  --modal-close-color: #364153;
  --modal-interactive-background: #f5f5f5;
  --modal-button-primary-background: #2b36f5;
  --modal-button-primary-background-hover: #1f28a8;
  --modal-button-primary-color: #fff;
  --modal-button-secondary-border: #d1d5dc;
  --modal-button-secondary-color: #364153;
  --modal-backdrop: rgb(0 0 0 / 50%);
  --modal-focus-color: var(--modal-button-primary-background);
  --modal-duration: 0.3s;
}

.modal-basic-no-title__open {
  display: inline-grid;
  place-items: center;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--modal-button-primary-color);
  background-color: var(--modal-button-primary-background);
  border-radius: calc(infinity * 1px);

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-button-primary-background-hover);
    }
  }
}

.modal-basic-no-title__dialog {
  --modal-dialog-viewport-gap: 24px;
  --modal-dialog-viewport-margin: calc(var(--modal-dialog-viewport-gap) * 2);

  width: calc(100% - var(--modal-dialog-viewport-margin));
  max-width: 480px;
  max-height: calc(100dvh - var(--modal-dialog-viewport-margin));
  padding: 24px;
  margin: auto;
  overflow-y: auto;
  background-color: var(--modal-background);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--modal-duration),
    transform var(--modal-duration);
}

.modal-basic-no-title__dialog--visible {
  opacity: 1;
  transform: translateY(0);
}

.modal-basic-no-title__dialog::backdrop {
  background-color: var(--modal-backdrop);
  opacity: 0;
  transition: opacity var(--modal-duration);
}

.modal-basic-no-title__dialog--visible::backdrop {
  opacity: 1;
}

.modal-basic-no-title__header {
  display: flex;
  justify-content: flex-end;
}

.modal-basic-no-title__close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-block: -8px;
  margin-inline: auto -8px;
  color: var(--modal-close-color);
  border-radius: 8px;

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-interactive-background);
    }
  }
}

.modal-basic-no-title__text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--modal-text-color);
}

.modal-basic-no-title__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.modal-basic-no-title__button {
  display: inline-grid;
  place-items: center;
  min-width: 120px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: calc(infinity * 1px);
}

.modal-basic-no-title__button--primary {
  color: var(--modal-button-primary-color);
  background-color: var(--modal-button-primary-background);

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-button-primary-background-hover);
    }
  }
}

.modal-basic-no-title__button--secondary {
  color: var(--modal-button-secondary-color);
  border: 1px solid var(--modal-button-secondary-border);

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-interactive-background);
    }
  }
}

/* focus */
.modal-basic-no-title__open,
.modal-basic-no-title__close,
.modal-basic-no-title__button {
  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--modal-focus-color);
    outline-offset: 2px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal-basic-no-title__open,
  .modal-basic-no-title__close,
  .modal-basic-no-title__button,
  .modal-basic-no-title__dialog,
  .modal-basic-no-title__dialog::backdrop {
    transition: none;
  }
}

(function () {
  const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");

  document.querySelectorAll(".js-modal-basic-no-title").forEach((root) => {
    const openButton = root.querySelector(".js-modal-basic-no-title-open");
    const dialog = root.querySelector(".js-modal-basic-no-title-dialog");
    if (!openButton || !dialog) return;

    const visibleClass = "modal-basic-no-title__dialog--visible";
    let isClosing = false;
    let openRafId = 0;
    let closeTransitionHandler = null;
    let closeFallbackTimer = 0;

    function getCloseTransitionMs() {
      const duration = getComputedStyle(root)
        .getPropertyValue("--modal-duration")
        .trim();
      if (!duration) return 0;
      const ms = duration.endsWith("ms")
        ? parseFloat(duration)
        : parseFloat(duration) * 1000;
      return Number.isFinite(ms) ? ms : 0;
    }

    function cleanupCloseTransition() {
      if (closeTransitionHandler) {
        dialog.removeEventListener("transitionend", closeTransitionHandler);
        closeTransitionHandler = null;
      }
      if (closeFallbackTimer) {
        clearTimeout(closeFallbackTimer);
        closeFallbackTimer = 0;
      }
    }

    function finishClose() {
      if (!isClosing) return;

      cleanupCloseTransition();
      dialog.classList.remove(visibleClass);

      if (dialog.open) {
        dialog.close();
      }

      isClosing = false;
    }

    function openDialog() {
      if (dialog.open && !isClosing) return;

      if (isClosing) {
        cleanupCloseTransition();
        isClosing = false;
        dialog.classList.add(visibleClass);
        return;
      }

      dialog.showModal();
      openRafId = requestAnimationFrame(() => {
        openRafId = 0;
        if (!dialog.open || isClosing) return;
        dialog.classList.add(visibleClass);
      });
    }

    function closeDialog() {
      if (!dialog.open) {
        cleanupCloseTransition();
        isClosing = false;
        return;
      }

      if (isClosing) return;

      cleanupCloseTransition();

      if (openRafId) {
        cancelAnimationFrame(openRafId);
        openRafId = 0;
        dialog.classList.remove(visibleClass);
        dialog.close();
        return;
      }

      const hasVisibleClass = dialog.classList.contains(visibleClass);

      if (reducedMotion.matches || !hasVisibleClass) {
        dialog.classList.remove(visibleClass);
        dialog.close();
        return;
      }

      isClosing = true;
      dialog.classList.remove(visibleClass);

      closeTransitionHandler = (event) => {
        if (event.target !== dialog) return;
        finishClose();
      };

      dialog.addEventListener("transitionend", closeTransitionHandler);
      closeFallbackTimer = window.setTimeout(
        finishClose,
        getCloseTransitionMs() + 50,
      );
    }

    openButton.addEventListener("click", openDialog);

    dialog
      .querySelectorAll(".js-modal-basic-no-title-close")
      .forEach((button) => {
        button.addEventListener("click", closeDialog);
      });

    dialog.addEventListener("cancel", (event) => {
      event.preventDefault();
      closeDialog();
    });

    // ダイアログ本体の外側(バックドロップ)クリックで閉じる
    dialog.addEventListener("click", (event) => {
      if (event.target !== dialog) return;
      const rect = dialog.getBoundingClientRect();
      const inDialog =
        rect.top <= event.clientY &&
        event.clientY <= rect.bottom &&
        rect.left <= event.clientX &&
        event.clientX <= rect.right;
      if (!inDialog) {
        closeDialog();
      }
    });
  });
})();

<div class="modal-basic-scroll js-modal-basic-scroll">
  <button
    class="modal-basic-scroll__open js-modal-basic-scroll-open"
    type="button"
  >
    モーダルを開く
  </button>

  <dialog
    class="modal-basic-scroll__dialog js-modal-basic-scroll-dialog"
    aria-label="モーダルタイトル"
  >
    <div class="modal-basic-scroll__header">
      <h3 class="modal-basic-scroll__title">モーダルタイトル</h3>
      <button
        class="modal-basic-scroll__close js-modal-basic-scroll-close"
        type="button"
        aria-label="モーダルを閉じる"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          aria-hidden="true"
        >
          <path
            d="M5 5l12 12M17 5L5 17"
            stroke="currentColor"
            stroke-width="1.8"
          />
        </svg>
      </button>
    </div>

    <div
      class="modal-basic-scroll__body"
      tabindex="0"
      role="region"
      aria-label="本文"
    >
      <p class="modal-basic-scroll__text">
        ここに説明テキストが入ります。ここに説明テキストが入ります。ここに説明テキストが入ります。
      </p>
      <ul class="modal-basic-scroll__list">
        <li class="modal-basic-scroll__list-item">項目 1</li>
        <li class="modal-basic-scroll__list-item">項目 2</li>
        <li class="modal-basic-scroll__list-item">項目 3</li>
        <li class="modal-basic-scroll__list-item">項目 4</li>
        <li class="modal-basic-scroll__list-item">項目 5</li>
        <li class="modal-basic-scroll__list-item">項目 6</li>
        <li class="modal-basic-scroll__list-item">項目 7</li>
        <li class="modal-basic-scroll__list-item">項目 8</li>
        <li class="modal-basic-scroll__list-item">項目 9</li>
        <li class="modal-basic-scroll__list-item">項目 10</li>
        <li class="modal-basic-scroll__list-item">項目 11</li>
        <li class="modal-basic-scroll__list-item">項目 12</li>
        <li class="modal-basic-scroll__list-item">項目 13</li>
        <li class="modal-basic-scroll__list-item">項目 14</li>
        <li class="modal-basic-scroll__list-item">項目 15</li>
        <li class="modal-basic-scroll__list-item">項目 16</li>
        <li class="modal-basic-scroll__list-item">項目 17</li>
        <li class="modal-basic-scroll__list-item">項目 18</li>
        <li class="modal-basic-scroll__list-item">項目 19</li>
        <li class="modal-basic-scroll__list-item">項目 20</li>
      </ul>
    </div>

    <div class="modal-basic-scroll__footer">
      <button
        class="modal-basic-scroll__button modal-basic-scroll__button--secondary js-modal-basic-scroll-close"
        type="button"
      >
        キャンセル
      </button>
      <button
        class="modal-basic-scroll__button modal-basic-scroll__button--primary js-modal-basic-scroll-close"
        type="button"
      >
        OK
      </button>
    </div>
  </dialog>
</div>

/* reset */
:where(h3).modal-basic-scroll__title,
:where(p).modal-basic-scroll__text,
:where(ul).modal-basic-scroll__list {
  margin: 0;
  font: inherit;
}

:where(ul).modal-basic-scroll__list {
  padding: 0;
  list-style: none;
}

:where(button).modal-basic-scroll__open,
:where(button).modal-basic-scroll__close,
:where(button).modal-basic-scroll__button {
  box-sizing: border-box;
  padding: 0;
  font: inherit;
  vertical-align: middle;
  color: inherit;
  text-align: inherit;
  appearance: none;
  cursor: pointer;
  background: none;
  border: none;
}

:where(dialog).modal-basic-scroll__dialog {
  box-sizing: border-box;
  padding: 0;
  border: none;
}

/* snippet */
.modal-basic-scroll {
  --modal-background: #fff;
  --modal-title-color: #364153;
  --modal-text-color: #5e6775;
  --modal-close-color: #364153;
  --modal-interactive-background: #f5f5f5;
  --modal-button-primary-background: #2b36f5;
  --modal-button-primary-background-hover: #1f28a8;
  --modal-button-primary-color: #fff;
  --modal-button-secondary-border: #d1d5dc;
  --modal-button-secondary-color: #364153;
  --modal-backdrop: rgb(0 0 0 / 50%);
  --modal-focus-color: var(--modal-button-primary-background);
  --modal-duration: 0.3s;
}

.modal-basic-scroll__open {
  display: inline-grid;
  place-items: center;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--modal-button-primary-color);
  background-color: var(--modal-button-primary-background);
  border-radius: calc(infinity * 1px);

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-button-primary-background-hover);
    }
  }
}

.modal-basic-scroll__dialog {
  --modal-dialog-viewport-gap: 24px;
  --modal-dialog-viewport-margin: calc(var(--modal-dialog-viewport-gap) * 2);

  flex-direction: column;
  width: calc(100% - var(--modal-dialog-viewport-margin));
  max-width: 480px;
  height: calc(100dvh - var(--modal-dialog-viewport-margin));
  max-height: 400px;
  margin: auto;
  overflow: hidden;
  color-scheme: light;
  background-color: var(--modal-background);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--modal-duration),
    transform var(--modal-duration);
}

.modal-basic-scroll__dialog[open] {
  display: flex;
}

.modal-basic-scroll__dialog--visible {
  opacity: 1;
  transform: translateY(0);
}

.modal-basic-scroll__dialog::backdrop {
  background-color: var(--modal-backdrop);
  opacity: 0;
  transition: opacity var(--modal-duration);
}

.modal-basic-scroll__dialog--visible::backdrop {
  opacity: 1;
}

.modal-basic-scroll__header {
  display: flex;
  flex-shrink: 0;
  column-gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px;
}

.modal-basic-scroll__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--modal-title-color);
}

.modal-basic-scroll__close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-block: -8px;
  margin-inline: auto -8px;
  color: var(--modal-close-color);
  border-radius: 8px;

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-interactive-background);
    }
  }
}

.modal-basic-scroll__body {
  flex: 1;
  min-height: 0;
  padding: 0 16px 24px;
  overflow-y: auto;
  border-radius: 8px;
}

.modal-basic-scroll__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--modal-text-color);
}

.modal-basic-scroll__list {
  display: grid;
  row-gap: 8px;
  margin-top: 16px;
}

.modal-basic-scroll__list-item {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--modal-text-color);
  background-color: var(--modal-interactive-background);
  border-radius: 8px;
}

.modal-basic-scroll__footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: flex-end;
  padding: 24px;
}

.modal-basic-scroll__button {
  display: inline-grid;
  place-items: center;
  min-width: 120px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: calc(infinity * 1px);
}

.modal-basic-scroll__button--primary {
  color: var(--modal-button-primary-color);
  background-color: var(--modal-button-primary-background);

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-button-primary-background-hover);
    }
  }
}

.modal-basic-scroll__button--secondary {
  color: var(--modal-button-secondary-color);
  border: 1px solid var(--modal-button-secondary-border);

  @media (any-hover: hover) {
    transition: background-color var(--modal-duration);

    &:hover {
      background-color: var(--modal-interactive-background);
    }
  }
}

/* focus */
.modal-basic-scroll__open,
.modal-basic-scroll__close,
.modal-basic-scroll__button,
.modal-basic-scroll__body {
  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--modal-focus-color);
    outline-offset: 2px;
  }
}

.modal-basic-scroll__body:focus-visible {
  outline-offset: -2px;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal-basic-scroll__open,
  .modal-basic-scroll__close,
  .modal-basic-scroll__button,
  .modal-basic-scroll__dialog,
  .modal-basic-scroll__dialog::backdrop {
    transition: none;
  }
}

(function () {
  const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
  let instanceIndex = 0;

  document.querySelectorAll(".js-modal-basic-scroll").forEach((root) => {
    const openButton = root.querySelector(".js-modal-basic-scroll-open");
    const dialog = root.querySelector(".js-modal-basic-scroll-dialog");
    if (!openButton || !dialog) return;

    instanceIndex += 1;
    const title = root.querySelector(".modal-basic-scroll__title");
    if (title) {
      const titleId = `modal-basic-scroll-title-${instanceIndex}`;
      title.id = titleId;
      dialog.setAttribute("aria-labelledby", titleId);
    }

    const visibleClass = "modal-basic-scroll__dialog--visible";
    let isClosing = false;
    let openRafId = 0;
    let closeTransitionHandler = null;
    let closeFallbackTimer = 0;

    function getCloseTransitionMs() {
      const duration = getComputedStyle(root)
        .getPropertyValue("--modal-duration")
        .trim();
      if (!duration) return 0;
      const ms = duration.endsWith("ms")
        ? parseFloat(duration)
        : parseFloat(duration) * 1000;
      return Number.isFinite(ms) ? ms : 0;
    }

    function cleanupCloseTransition() {
      if (closeTransitionHandler) {
        dialog.removeEventListener("transitionend", closeTransitionHandler);
        closeTransitionHandler = null;
      }
      if (closeFallbackTimer) {
        clearTimeout(closeFallbackTimer);
        closeFallbackTimer = 0;
      }
    }

    function finishClose() {
      if (!isClosing) return;

      cleanupCloseTransition();
      dialog.classList.remove(visibleClass);

      if (dialog.open) {
        dialog.close();
      }

      isClosing = false;
    }

    function openDialog() {
      if (dialog.open && !isClosing) return;

      if (isClosing) {
        cleanupCloseTransition();
        isClosing = false;
        dialog.classList.add(visibleClass);
        return;
      }

      dialog.showModal();
      openRafId = requestAnimationFrame(() => {
        openRafId = 0;
        if (!dialog.open || isClosing) return;
        dialog.classList.add(visibleClass);
      });
    }

    function closeDialog() {
      if (!dialog.open) {
        cleanupCloseTransition();
        isClosing = false;
        return;
      }

      if (isClosing) return;

      cleanupCloseTransition();

      if (openRafId) {
        cancelAnimationFrame(openRafId);
        openRafId = 0;
        dialog.classList.remove(visibleClass);
        dialog.close();
        return;
      }

      const hasVisibleClass = dialog.classList.contains(visibleClass);

      if (reducedMotion.matches || !hasVisibleClass) {
        dialog.classList.remove(visibleClass);
        dialog.close();
        return;
      }

      isClosing = true;
      dialog.classList.remove(visibleClass);

      closeTransitionHandler = (event) => {
        if (event.target !== dialog) return;
        finishClose();
      };

      dialog.addEventListener("transitionend", closeTransitionHandler);
      closeFallbackTimer = window.setTimeout(
        finishClose,
        getCloseTransitionMs() + 50,
      );
    }

    openButton.addEventListener("click", openDialog);

    dialog
      .querySelectorAll(".js-modal-basic-scroll-close")
      .forEach((button) => {
        button.addEventListener("click", closeDialog);
      });

    dialog.addEventListener("cancel", (event) => {
      event.preventDefault();
      closeDialog();
    });

    // ダイアログ本体の外側(バックドロップ)クリックで閉じる
    dialog.addEventListener("click", (event) => {
      if (event.target !== dialog) return;
      const rect = dialog.getBoundingClientRect();
      const inDialog =
        rect.top <= event.clientY &&
        event.clientY <= rect.bottom &&
        rect.left <= event.clientX &&
        event.clientX <= rect.right;
      if (!inDialog) {
        closeDialog();
      }
    });
  });
})();