@layer components {
  /* Prevent page scrolling when modal dialog is open */
  html:has(dialog:modal) {
    overflow: hidden;
  }

  :is(.dialog) {
    border: 0;
    opacity: 0;
    transform: scale(0.85);
    transform-origin: center;
    transition-behavior: allow-discrete;
    transition-duration: calc(var(--dialog-duration) / 2);
    transition-property: display, opacity, overlay, transform;
    transition-timing-function: ease-out;

    &::backdrop {
      background-color: var(--color-black);
      opacity: 0;
      transition-behavior: allow-discrete;
      transition-duration: calc(var(--dialog-duration) / 2);
      transition-property: display, opacity, overlay;
      transition-timing-function: ease-out;
    }

    &[open] {
      opacity: 1;
      transform: scale(1);
      transition-duration: var(--dialog-duration);

      &::backdrop {
        opacity: 0.5;
        transition-duration: var(--dialog-duration);
      }
    }

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

      &[open]::backdrop {
        opacity: 0;
      }
    }
  }

  .dialog {
    inline-size: min(40ch, calc(100vw - var(--inline-space-double) * 2));
    padding: var(--block-space) var(--block-space-double);
    border-radius: 1em;
    box-shadow: 0 0 0 1px oklch(var(--lch-black) / 5%),
                0 0.2em 0.2em oklch(var(--lch-black) / 5%),
                0 0.4em 0.4em oklch(var(--lch-black) / 5%),
                0 0.8em 0.8em oklch(var(--lch-black) / 5%);
    background: var(--color-canvas);
    color: var(--color-ink);

    &[open] {
      display: flex;
      flex-direction: column;
      gap: var(--block-space);
    }
  }

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

  .dialog__title {
    font-weight: 700;
    margin: 0;
  }

  .dialog__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-ink-medium);
    font-size: var(--text-large);
    padding: 0;
    outline: none;
  }

  .dialog__body {
    white-space: normal;
  }

  .dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--inline-space);
  }
}