@layer components {
  .inv-templates-dropdown {
    position: relative;
  }

  /* No saved templates: the menu and its button go, rather than a menu that
     opens on nothing. The rows are streamed in and out by the server, so the
     rule follows them without a script watching the list. */
  .inv-templates-dropdown:not(:has(.inv-tmpl-item)) {
    display: none;
  }

  .inv-templates-dropdown__menu {
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    max-inline-size: min(92vw, 460px);
    min-inline-size: min(92vw, 340px);

    /* Mobile: drop the min-width floor so the right-anchored menu shrinks to its
       (truncated) content and can't overflow the left edge of the viewport. */
    @media (width < 480px) {
      max-inline-size: 88vw;
      min-inline-size: 0;
    }
  }

  .inv-tmpl-item {
    align-items: center;
    display: flex;
  }

  .inv-tmpl-item + .inv-tmpl-item {
    border-block-start: 1.5px dashed var(--color-border-strong);
  }

  /* Draws the eye to a row the server just added — a template saved from the
     invoice header lands at the top of an already-open menu. */
  .inv-tmpl-item--flash {
    animation: inv-tmpl-item-flash 1.4s ease-in-out;
  }

  /* Both pulses live in one run rather than two iterations, so the fade out of
     the first eases straight into the fade in of the second. */
  @keyframes inv-tmpl-item-flash {
    0%, 50%, 100% { background-color: transparent; }
    25%, 75% { background-color: var(--color-brand-tint); }
  }

  /* button_to creates <form> — display: contents lets flex see the buttons directly */
  .inv-tmpl-item form {
    display: contents;
  }

  .inv-tmpl-item__view {
    align-items: center;
    display: flex;
    flex: 1;
    min-inline-size: 0;
  }

  .inv-tmpl-item__apply {
    color: var(--color-ink);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inv-tmpl-item__apply:hover {
    color: var(--color-brand);
  }

  /* ─── Renaming a saved template ─────────── */

  /* The in-place rename either kind of template row shows instead of its
     view (`templates/_rename`): the name in a field, and the tick that saves
     it. */
  .tmpl-rename {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 0.25rem;
    min-inline-size: 0;
    padding: 0.25rem 0.375rem 0.25rem 0.75rem;
  }

  .tmpl-rename__input {
    border-color: var(--color-brand);
    flex: 1;
    font-size: 0.9375rem;
    padding: 0.375rem 0.5rem;
  }

  .tmpl-rename__save {
    color: var(--color-brand);
  }

}