@layer components {
  /*
   * Native <dialog> (focus trap, Esc, top layer for free), animated in and out
   * with @starting-style and allow-discrete transitions of display/overlay.
   */
  .dialog {
    inline-size: min(100% - 2 * var(--gutter), 26rem);
    margin: auto;
    padding: var(--space-m);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-l);
    opacity: 0;
    scale: 0.96;
    transition:
      opacity var(--duration-base) var(--ease-out),
      scale var(--duration-base) var(--ease-out),
      overlay var(--duration-base) allow-discrete,
      display var(--duration-base) allow-discrete;

    &[open] {
      opacity: 1;
      scale: 1;

      @starting-style {
        opacity: 0;
        scale: 0.96;
      }
    }

    &::backdrop {
      background-color: oklch(20% 0.01 70 / 0);
      backdrop-filter: blur(0);
      transition:
        background-color var(--duration-base) var(--ease-out),
        backdrop-filter var(--duration-base) var(--ease-out),
        overlay var(--duration-base) allow-discrete,
        display var(--duration-base) allow-discrete;
    }

    &[open]::backdrop {
      background-color: oklch(20% 0.01 70 / 0.35);
      backdrop-filter: blur(3px);

      @starting-style {
        background-color: oklch(20% 0.01 70 / 0);
        backdrop-filter: blur(0);
      }
    }
  }

  .dialog__message {
    font-size: var(--step-0);
    font-weight: 500;
  }
}