@layer components {
  /* Suggestions float over what follows the field instead of pushing it down. */
  .suggestions {
    position: relative;
  }

  /* A turbo-frame is display: contents by default, which would leave nothing to position. */
  .suggestions__list {
    display: block;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 10;
    max-block-size: 60vh;
    overflow-y: auto;
    background-color: var(--bg);
    border: var(--border-width) solid var(--border);
    border-radius: var(--standard-border-radius);
    box-shadow: 0 0.5rem 1.5rem oklch(0% 0 0 / 0.15);

    &:not(:has(.resource-list__item:not([hidden]))) {
      display: none;
    }
  }
}