@layer components {
  .popup-anchor {
    position: relative;
  }

  /* The upload's form sits beside its menu, so the menu's button waits with it. */
  .add-file:has(> form[aria-busy]) > .popup-anchor > .btn {
    cursor: not-allowed;
    opacity: 0.3;
    pointer-events: none;
  }

  .popup--fading,
  .popup {
    opacity: 0;
    scale: 0.95;
    transform-origin: top;
    transition: var(--duration-medium) var(--ease-out-expo);
    transition-behavior: allow-discrete;
    transition-property: display, opacity, overlay, scale;

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

    @starting-style {
      &[open] {
        opacity: 0;
        scale: 0.95;
      }
    }
  }

  /* A divider shows only between two items, so an empty group leaves no gap and no doubled or trailing line. */
  .popup__divider {
    border-block-start: 1px solid var(--color-ink-lighter);
    display: none;
    margin-block: var(--block-space-half);

    .popup__item ~ &:has(+ .popup__item) {
      display: block;
    }
  }
}