@layer components {
  /* Bottom-anchored modal used for the quick add/edit forms */
  .sheet {
    background-color: var(--color-canvas);
    border-radius: 0.5em;
    border: var(--border);
    box-shadow: var(--shadow);
    color: var(--color-ink);
    inline-size: 90dvw;
    inset-block-end: 0.5rem;
    margin: auto;
    max-inline-size: 400px;
    overscroll-behavior: contain;
    padding: var(--block-space-half) var(--inline-space-double) var(--block-space-double);
  }

  .sheet__close {
    background: none;
    border: 0;
    color: var(--color-link);
    cursor: pointer;
    font: inherit;
    padding: 0;
  }

  /* Stop the page behind the sheet from scrolling with it */
  body:has(dialog[open]) {
    overflow: hidden;
  }
}