Q:

How to put a paper-fab on the seam of a core-toolbar with the content below it, in a core-header-panel

Is there an easy way to put a paper-fab on the seam of a core-toolbar with the content below it, in a core-header-panel? The core-header-panel is using waterfall-tall and therefore can change height. 
The idea is to make it look like the pink button, as well as make the pink button always track the edge.

A:

If the toolbar is tall, but it then shrinks because the user scrolls down the list, I assume the fab has to move with it. The best way I could find contains the 2 possible heights of the toolbar hardcoded, as well as the transition the toolbar uses.
#core_toolbar {
  color: rgb(255, 255, 255);
  font-size: 1.2rem;
  font-weight: 400;
  background-color: rgb(33, 150, 243);

  #create_button {
    position: absolute;
    top: calc(64px - 28px);
    right: 24px;
    z-index: 1;
    transition: top 0.18s ease-in;
  }
}
#core_toolbar.tall {
  #create_button {
    position: absolute;
    top: calc(192px - 28px);
    right: 24px;
    z-index: 1;
    transition: top 0.18s ease-in;
  }
}

Nothing special about the html:
<core-header-panel mode="waterfall-tall" id="core_header_panel">
  <core-toolbar id="core_toolbar" class="animate tall">
    <div></div>
    <paper-fab id="create_button" icon="add"></paper-fab>
  </core-toolbar>
  <section></section>
</core-header-panel>

