@layer components {
  /* The quick action modal (quick_actions#new) */
  .quick-action {
    /* Width from .dialog--action (dialog.css), shared with the delete dialog. */

    .popup {
      max-inline-size: min(30rem, 100dvw - 4rem);
    }
  }

  .quick-action__picker {
    position: relative;

    > .btn {
      flex: 1 1 auto;
      justify-content: space-between;
      max-inline-size: 100%;
    }
  }

  .quick-action__records {
    max-block-size: 18rem;
    overflow-y: auto;
  }

  /* In the modal the picker spans the form, with room before the fields */
  .quick-action__picker--full {
    margin-block-end: var(--block-space);

    > .btn {
      inline-size: 100%;
    }
  }

  .quick-action__close {
    --btn-size: 2em;
    --btn-icon-size: 1em;

    font-size: var(--text-small);
  }

  /* The modal focuses itself on open, not the close button */
  .quick-action:focus-visible {
    outline: 0;
  }

  .quick-action__upload {
    min-block-size: 6rem;
  }
}