@layer components {
  /* ——— A file on its way up ———
     The name, and the bar filling behind it. One look wherever a file goes up:
     the chat composer's attachment and a folder's drop (upload_controller.js).
     --percentage is the controller's to set. */
  .pending-upload {
    position: relative;
    overflow: clip;
    padding: var(--block-space-half) var(--inline-space);
    border-radius: var(--border-radius);

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      inline-size: var(--percentage);
      background-color: var(--color-surface);
    }

    > * {
      position: relative;
    }
  }

  /* ——— What a drop target says ———
     Only while files hover over it, which is when it wears the drop look
     (drop_target_controller.js, drag_and_drop.css). */
  .upload-hint {
    --icon-size: 1rem;

    display: none;
    align-items: center;
    gap: var(--inline-space);

    .is-target & {
      display: flex;
    }
  }
}