@layer components {
  .modal {
    position: fixed;
    inset: var(--space-0);
    z-index: var(--z-modal);
    inline-size: var(--size-fill);
    block-size: var(--size-fill);
    max-inline-size: none;
    max-block-size: none;
    margin: var(--space-0);
    padding: var(--modal-inset);
    overflow: hidden;
    border: none;
    outline: none;
    background-color: var(--color-scrim);
    color: var(--color-ink);
    opacity: var(--opacity-none);
    transition:
      opacity var(--dur-base) var(--ease-calm),
      overlay var(--dur-base) var(--ease-calm) allow-discrete,
      display var(--dur-base) var(--ease-calm) allow-discrete;
  }

  .modal[open] {
    display: grid;
    place-items: center;
    opacity: initial;
  }

  .modal::backdrop {
    background-color: transparent;
  }

  @starting-style {
    .modal[open] {
      opacity: var(--opacity-none);
    }
  }

  .modal__panel {
    inline-size: var(--size-fill);
    block-size: var(--size-fill);
    max-inline-size: var(--modal-inline-size);
    max-block-size: var(--modal-block-size);
    overflow-y: auto;
    overscroll-behavior: contain;
    outline: none;
    border-radius: var(--modal-radius);
    background-color: var(--color-bg);
    box-shadow: var(--elev-4);
    transition: translate var(--dur-sheet) var(--ease-spring-soft);
  }

  @starting-style {
    .modal[open] .modal__panel {
      translate: var(--space-0) var(--modal-enter-offset);
    }
  }

  .modal__header {
    position: sticky;
    inset-block-start: var(--space-0);
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: var(--tap-min) minmax(var(--space-0), var(--track-fill)) var(--tap-min);
    grid-template-areas: ". title close";
    align-items: center;
    column-gap: var(--space-4);
    padding-block: calc(var(--safe-top) + var(--space-3)) var(--space-3);
    padding-inline: var(--space-5);
    border-block-end: var(--border-width) solid var(--color-border);
    /* The panel's rounded scroll box does not clip the glass backdrop. */
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }

  .modal__title {
    grid-area: title;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--type-heading);
    color: var(--color-ink);
    text-align: center;
  }

  .modal__title--below {
    clip-path: inset(50%);
  }

  .modal__close {
    grid-area: close;
  }

  .modal__header--form {
    grid-template-columns: minmax(max-content, var(--track-fill)) minmax(var(--space-0), auto) minmax(max-content, var(--track-fill));
    grid-template-areas: "leading title trailing";
  }

  .modal__leading {
    grid-area: leading;
    justify-self: start;
  }

  .modal__trailing {
    grid-area: trailing;
    justify-self: end;
  }

  .modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    padding-block: var(--space-7) calc(var(--safe-bottom) + var(--space-9));
    padding-inline: var(--gutter-fluid);
  }

  .modal--viewer .modal__panel {
    display: flex;
    flex-direction: column;
    max-inline-size: none;
    max-block-size: none;
    overflow: hidden;
  }

  .modal--viewer .modal__body {
    flex: 1;
    min-block-size: var(--space-0);
    gap: var(--space-0);
    padding: var(--space-0);
  }
}

@layer components {
  @media (width >= 800px) {
    .modal__header {
      padding: var(--space-6);
    }
  }
}