@layer components {
  .dialog {
    --padding-block: var(--dialog-padding-block, 0);
    --padding-inline: var(--dialog-padding-inline, 0);

    overflow: hidden;
    z-index: 1;
    max-width: none;
    max-height: none;
    padding: var(--padding-block) var(--padding-inline);
    transition-property: display, overlay;

    &::backdrop {
      background: var(--backdrop-background, color-mix(in oklab, var(--color-canvas) var(--backdrop-opacity, 0.5), transparent));
      backdrop-filter: var(--backdrop-blur, var(--backdrop-blur));

      transition-property: display, overlay, opacity;
      opacity: 0;
    }

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

  @starting-style {
    .dialog[open]::backdrop { opacity: 0; }
  }

  .dialog__body {
    animation-name: var(--dialog-animation-out, fade-out);
    animation-fill-mode: both;

    .dialog[open] & {
      animation-name: var(--dialog-animation-in, fade-in);
    }
  }

  @starting-style {
    .dialog[open] .dialog__body { animation-name: var(--dialog-animation-out, fade-out); }
  }

  .dialog__exit {
    position: absolute;
    inset: var(--padding-block) var(--padding-inline) auto auto;
    padding: var(--padding-block);
  }

  .dialog--modal {
    --padding-block: var(--dialog-padding-block, var(--block-space));
    --padding-inline: var(--dialog-padding-inline, var(--block-space));

    margin: auto;
    max-width: 90ch;
    max-height: 100%;

    grid-template-rows: minmax(0, 1fr);

    &[open] {
      display: grid;
    }

    .dialog__body {
      overflow-y: auto;
    }
  }

  body[data-modal-open] .block-clicks {
    pointer-events: auto;
    position: fixed;
    content: "";
    inset: 0;
    z-index: 99;
  }

  dialog.menu {
    --_bg-color: var(--color-canvas);
    --_border-color: var(--color-muted);

    --_animation-in-name: fade-in;
    --_animation-out-name: fade-out;

    /* color: var(--color-muted); */

    filter: drop-shadow(var(--_border-color) 0 0 1px);

    .dialog-main {
      padding: 0.75rem 1rem;

      /* border: 1px solid var(--color-background-light); */
      border-radius: var(--radius-sm);
    }

    &::before {
      display: block;
      content: "";
      width: 5px;
      margin: 0 auto;
      border-width: 5px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: var(--_bg-color, var(--color-text-normal));
    }

    &.right-0::before {
      margin-right: 15px;
    }
  }

  dialog.hero {
    --_bg-color: var(--accent);

    --_animation-in-name: slide-in;
    --_animation-out-name: slide-out;

    .dialog-main {
      border-radius: var(--radius);
    }
  }
}