/*
    THE TOKEN PICKER'S OWN STYLESHEET.

    Linked from App.razor, because the picker is a shared component: the template designer draws it
    beside the artboard and the email template editor draws it beside the message, and a component
    rendered from several places cannot know whether its file is already there. It holds the list,
    the group heading and the row a token is offered on, and nothing else.
*/

.sv-token-list {
  max-height: 260px;
  overflow-y: auto;
  /* THE LIST KEEPS ITS SCROLL TO ITSELF. A wheel that reaches the end of a scroll box chains to
     whatever is behind it, so the last turn over this list scrolled the dialog underneath - and in
     a panel that is a control moving out from under the pointer while it is being read. */
  overscroll-behavior: contain;
  margin-top: var(--sv-space-2);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-card);
  padding: var(--sv-space-2);
}

.sv-token-list__group {
  display: block;
  font: 500 10px/1.4 var(--sv-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sv-text-tertiary);
  margin: var(--sv-space-3) 0 var(--sv-space-1);
}

.sv-token-list__group:first-child {
  margin-top: 0;
}

.sv-token {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--sv-radius-control);
  background: transparent;
  cursor: pointer;
}

.sv-token:hover {
  border-color: var(--sv-border);
  background: var(--sv-bg-overlay);
}

.sv-token__key {
  display: block;
  font: 500 11px/1.3 var(--sv-font-mono);
  color: var(--sv-accent);
}

.sv-token__label {
  display: block;
  font: 400 11px/1.3 var(--sv-font-sans);
  color: var(--sv-text-secondary);
}

/* ── The picker as a panel ─────────────────────────────────────────────────
   THE SAME LIST, ANCHORED TO A TRIGGER. `TokenInsertMenu` borrows the menu behaviour from
   `js/ui/page-header.js` and draws its surface with `.sv-menu__panel`, so what is left for this
   family is a width: the panel's own default is sized for a menu of items, and a glossary entry is
   a key over a description and wants more than that. The list inside keeps its own cap and scrolls,
   which is what stops a panel of sixty-five running off the bottom of a dialog.
   ────────────────────────────────────────────────────────────────────────── */

.sv-token-menu {
  /* The trigger is a button in a form row rather than the last control of a header, so the
     container hugs it instead of stretching to the row. */
  display: inline-block;
}

.sv-token-menu__panel {
  width: 320px;
  max-width: calc(100vw - var(--sv-space-5));
}

/* Inside a panel the list has the panel's own border around it, so a second one on the list is two
   hairlines a step apart. The cap and the scrolling stay: they are what the panel is sized by. */
.sv-token-menu__panel .sv-token-list {
  margin-top: var(--sv-space-2);
  border: 0;
  padding: 0;
}