.dialog {
  --duration: 0.3s;
  --scale: 0.6;

  scale: var(--scale);
  transition: all var(--duration) allow-discrete;

  &[open] {
    opacity: 1;
    scale: 1;
    @starting-style {
      opacity: 0;
      scale: var(--scale);
    }
  }

  /* ------------------------------------------------- */
  /* 装飾 */

  width: 100%;
  max-width: calc(360px);
  padding: 0;
  opacity: 0;
  border: 0;
  border-radius: 16px;
  inset: 0; /* （Safari 18.6）閉じるときも上下中央を維持するために指定 */
  position: fixed; /* （Safari 18.6）閉じるときも上下中央を維持するために指定 */

  .dialog__inner {
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 4%);
    background-color: #fff;
    padding: 16px;
    position: relative;
  }

  .dialog__close-button {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 16px;
    top: 12px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eaeaea;
    transition: 0.2s;

    &:hover {
      background-color: #ddd;
    }
  }

  .dialog__title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 16px;
    padding-right: 32px;
  }

  .dialog__text {
    color: #555;
    margin-bottom: 32px;
  }

  .dialog__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* ------------------------------------------------- */
  /* 背景 */
  &::backdrop {
    background-color: rgb(0 0 0 / 25%);
    opacity: 0;
    transition: display var(--duration) allow-discrete, opacity var(--duration);
  }

  &[open]::backdrop {
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }
}